javascript - React和NextJS:模块解析失败:意外的 token

对于我的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的图像加载速度要快得多。所以我宁愿使用插件。

最佳答案

您可以通过配置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
})));

关于javascript - React和NextJS:模块解析失败:意外的 token ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52613423/