如何在 React 中加载图像？

Question

I'm trying to load images in my React.js application and I can't get them to load. I've looked at a bunch of SO questions and none of them solved it. In my webpack.config.js file under module and rules I have the url loader.

{
    test: /\.(jpg|png)$/,
    use: {
      loader: 'url-loader',
    },
}

Then in my App.js file I have this.

import React from "react";
import '../css/App.css'
import locationImg from '../public/location.png'

function App() {
console.log(locationImg)
    return (
      <div>
        <h1>Contact Me</h1>
        <img src={locationImg} />
      </div>
    );
}

export default App;

My file structure looks like this

-src
    -Components
      -App.js
    -css
    -public
      -location.png

When I load this on the webpack live server, the image doesn't load. Why won't the image load?

Answer 1

try

const location= require(../public/location.png');

<img src={location} />

Answer 2

Try change the code to

<img src={locationImg.default} />

or

import * as locationImg from '../public/location.png'