gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 00:25:39 26 4
gpt4 key购买 nike

正在处理从 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>
);

最佳答案

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

关于javascript - 使用 nextjs9 在 img 标签中加载 .svg 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59039121/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com