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

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

1 个答案: