javascript - react 和 NextJS : Module parse failed: Unexpected token

Question

对于我的 WebApp，我将 React 与 NextJS 结合使用。为了能够以最佳方式加载图形，我使用 NextJS 插件 next-optimized-images .但是这个插件不能正常工作。

例如，我导入了这样一张图片:

import logo from '../../static/app-logo.svg';

我尝试在 <image> 中使用它们像这样的标签:

<img src={logo} height="24" width="115.5" alt="app-logo"></img>
//or so
<img src={require('../../static/app-logo.svg')} />

我得到错误:

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

但是，这有效:

const setbgImage = {
    backgroundImage: `url('../../static/background.jpg')`
};

<section className="welcomePageWelcome" style={setbgImage}>

我的 next.config.js看起来像这样:

//const withImages = require('next-images');
const withCSS = require('@zeit/next-css');
const withPlugins = require('next-compose-plugins');
const optimizedImages = require('next-optimized-images');

module.exports = withPlugins([
    [optimizedImages, {
      /* config for next-optimized-images */
    }],
    withCSS()
  ]);

我已经写信给开发者了，可惜我还没有收到回复。我希望你能进一步帮助我。

PS:我之前用过插件next-images .但是，带有 next-optimized-images 的图像加载速度更快。所以我宁愿使用插件。

Answer 1

可以通过配置nextJS来加载图片。在 next.config.js

中进行以下更改

const withCSS = require('@zeit/next-css');
const withSASS = require('@zeit/next-sass');
const withOptimizedImages = require('next-optimized-images');

module.exports = withOptimizedImages(withCSS(withSASS ({
       cssModules: true
})));