[英]webpack4 react jsx can't render img
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]'
}
},
另一件事是您應該像這樣更改圖像網址
<img src='/img/bg.jpg'/>
對不起,我弄錯了。 Create-react-app 也不起作用。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.