React JS 中的条件渲染和图像路径

Question

I don't really understand one moment.Let's say I have a component which conditionally renders data like this:

<div>
{isLoading ? <img src="../pathname/img.jpg" alt="loading" /> : <Page />}
</div>

Image is not rendered this way, shows a broken file icon. However, if I import the same image it works just fine:

import loadingImage from "../pathname/img.jpg"
<div>
{isLoading ? <img src={loadingImage} alt="loading" /> : <Page />}
</div>

I use npm start and my editor is VS Code. Do you know may be what is the reason to import it and not just simply provide a path name in src even if path is the same? The path I provided and file name was 100% correct in the first example.

Answer 1

That happens because your image probably isn't inside public folder.

You can add assets to the public folder and then you will have access to it.

eg For the code below, you will need a pathname folder with the img.jpg inside the public folder.

<img src="../pathname/img.jpg" alt="loading" />

But the best way to do this is using import in JavaScript files. This mechanism provides a number of benefits:

• Scripts and stylesheets get minified and bundled together to avoid extra network requests.
• Files are included in the bundle
• Missing files cause compilation errors instead of 404 errors for your users.
• Result filenames include content hashes so you don't need to worry about browsers caching their old versions.

With import , when the page is rendered, you will see sometinhg like this in the image: src="/static/media/img.xxxxx.jpg" . Thats because using import tells webpack to include that file in the bundle.

You can check more here - adding-images-fonts-and-files and here using-the-public-folder

Answer 2

You miss the curly brackets. This will work:

<div>
  {isLoading ? <img src={'../pathname/img.jpg'} alt='loading' /> : <Page />}
</div>

Answer 3

If you don't import the image file url then if you're using a webpack type bundler it won't include the file in the final build for you (to save you including unnecessary files that are not used).

The best way is to tell the bundler you need the file with an import statement. It will then store the file efficiently and auto update the URL reference as it gets updated in the final build.

You could also put the image in a public folder BUT this has several downsides as noted by other answers here.In one situation I was trying to update the URL string to use in CSS as a background-image: - but at run time, the file structure will have been changed by your web-bundler (but it won't understand it needs to update a string) so your URL reference will point to an incorrect location.

There's some good reading here: https://www.freecodecamp.org/news/react-background-image-tutorial-how-to-set-backgroundimage-with-inline-css-style/