React和NextJS:模块解析失败:意外令牌

Question

对于我的WebApp，我使用。为了能够最佳地加载图形，我使用了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
})));