作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
正在处理从 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/
我正在开发一个需要能够平均三个数字的 Facebook 应用程序。但是,它总是返回 0 作为答案。这是我的代码: $y = 100; $n = 250; $m = 300; $number = ($y
我只是无法弄清楚这一点,也找不到任何对我来说有意义的类似问题。我的问题:我从数据库中提取记录,并在我的网页上以每个面板 12 条的倍数显示它们。因此,我需要知道有多少个面板可以使用 JavaScrip
我是一名优秀的程序员,十分优秀!