React 和 NextJS：模塊解析失敗：意外的令牌

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
})));