webpack4 react jsx 无法渲染 img

Question

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;

Compiled HTML

<div>
<img src="/img/bg.896ed149.jpg" alt="logo">
<img src="./assets/images/bg.jpg" alt="logo">
</div>

Why can create-react-app use the second way?

I hope that the image can be rendered in the second way.

my webpack.base.config url-loader

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

Answer 1

The image is copied in your build folder but the name did not match. Remove the hash for the name in your webpack config

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

Another thing is you should change the image url like this

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

Answer 2

Sorry, I got it wrong. Create-react-app don't work either.