1. How to introduce images in react

In the past, we usedimgto introduce images as follows. Writing this way in react will cause an error:

I summarized it below Two ways:

1. Use the require method to introduce Lu Jin. Wrong usage:

The above will not take effect, because if you use create-react-app and require to import images, require returns an ES module instead of a string. This is because in file-loader, the esModule option is enabled by default.

So use one of the following methods to import the image: add .default after it

2,Introduce it through !important

import zzsc from "./zzsc1.png"

Then in Just introduce the variable directly intoimg. The name of this variable can be chosen arbitrarily.

The rendering is as follows:

However, sometimes the picture of your development environment is displayed, but when you deploy it to the test environment after packaging, you will find that the picture is gone again, scratching your head and wondering where the problem lies. . It's actually very simple. Webpack can only retrieve images in your public folder when packaging, so when placing image materials, the location of the image is also very important! Just put them all under the public file. Above code:

If you add "./" in front of your package path, you need to write all the paths. It will be easier if you don't add it

Recommended study: "react Video tutorial》