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

Question

Working on Migration project from Nextjs7 to Nextjs9, And could not able to include the .svg files in the image tag.正在处理从 Nextjs7 到 Nextjs9 的迁移项目，并且无法在图像标签中包含 .svg 文件。

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

Since it is a exiting project.因为它是一个现有的项目。 I want to make the .svg files to work with img tag itself.我想让 .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 is not support image import by default, you will need to use file-loader . 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;
  }
};

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

问题描述

1 个解决方案

解决方案1
2 已采纳 2019-11-25 20:56:16

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2019-11-25 20:56:16

解决方案1
2 已采纳 2019-11-25 20:56:16