webpack4 react jsx无法渲染img答案

【问题标题】：webpack4 react jsx can't render imgwebpack4 react jsx无法渲染img
【发布时间】：2019-12-31 09:45:29
【问题描述】：

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]'
  }
},

【问题讨论】：

标签： javascript reactjs webpack jsx

【解决方案1】：

图像已复制到您的构建文件夹中，但名称不匹配。删除 webpack 配置中名称的哈希

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url-loader',
  options: {
    limit: 8192,
    name: 'img/[name].[ext]'
  }
},

另一件事是您应该像这样更改图片网址

 <img src='/img/bg.jpg'/>

【讨论】：

【解决方案2】：

对不起，我弄错了。 Create-react-app 也不起作用。

【讨论】：