使用 nextjs9 在 img 标签中加载 .svg 文件

Question

正在处理从 Nextjs7 到 Nextjs9 的迁移项目，并且无法在图像标签中包含 .svg 文件。

演示： https://codesandbox.io/s/nextjs-mh9fp?fontsize=14&hidenavigation=1&theme=dark

因为它是一个现有的项目。我想让 .svg 文件与 img 标签本身一起使用。

import React from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import Head from "next/head";
import RawData from "./static/raw_data.txt";
import SVGFile from "./static/SVGFile.svg";

const App = () => (
  <div>
    <Head>
      <title>Trying out next.js</title>
    </Head>
    <div style={{ background: "green" }}>
      <img src={RawData} />
    </div>

    <div style={{ background: "red" }}>
      <h3>SVG IMAGES Included in img tag NOT LOADING</h3>
      <img src={SVGFile} />{/*Here is the problem*/}
    </div>
  </div>
);

Answer 1

Next.js 默认不支持图片导入，需要使用file-loader。

// next.config.js
module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.(png|jpe?g|gif|svg)$/i,
      loader: 'file-loader',
      options: {
        outputPath: 'images',
      },
    });
    return config;
  }
};