import React from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import icon from '@/assets/images/bg.jpg'
const App = () => {
return (
<Router>
<div>
<img src={icon} alt="logo" /> {/* success */}
<img src="./assets/images/bg.jpg" alt="logo" /> {/* fail */}
</div>
</Router>
)
}
export default App;
编译后的 HTML
<div>
<img src="/img/bg.896ed149.jpg" alt="logo">
<img src="./assets/images/bg.jpg" alt="logo">
</div>
为什么create-react-app可以用第二种方式?
希望图像可以用第二种方式渲染
我的 webpack.base.config url-loader
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 8192,
name: 'img/[name].[hash:8].[ext]'
}
},
最佳答案
图像已复制到您的构建文件夹中,但名称不匹配。删除 webpack 配置中名称的哈希值
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 8192,
name: 'img/[name].[ext]'
}
},
另一件事是你应该像这样更改图片 url
<img src='/img/bg.jpg'/>
关于javascript - webpack 4 react jsx 无法渲染图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57670808/