下一个优化图像：错误模块解析失败，意外字符 ''"答案

【问题标题】：Next-optimized-images: Error Module parse failed, Unexpected character ''"下一个优化图像：错误模块解析失败，意外字符 ''"
【发布时间】：2021-02-17 23:35:25
【问题描述】：

我正在尝试使用 next-optimized-images 优化我的 nextjs 页面图像

这是下一个.config.js：

module.exports = {
...
  withOptimizedImages: withOptimizedImages({
    webpack(config) {
      config.resolve.alias.images = path.join(__dirname, 'public')
      return config
    }
  }),
...

这是我将图像导入组件的方法：

require(`public/assets/icons/${iconName}`)

我的错误：

./public/assets/icons/website/information/hiring-black.svg 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

我正在使用最新版本的 next-optimized-image 并尝试了不同的指南，但仍然没有运气。请帮忙

【问题讨论】：

标签： performance frontend next.js webpack-4

【解决方案1】：

Next.js 现在默认优化图像。参考：next/image

如果需要svg，需要尝试添加svgr-webpackloader。

安装：yarn add @svgr/webpack -D

要配置它，请在next.config.js 中更新以下内容

module.exports = {
  ...
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });

    return config;
  },
  ...
};

如下使用：

...
import Star from './star.svg'
...
    <Star />
...

【讨论】：