React: Writing the img src using Javascript

In the module scope of the test file, you can utilize static import to import modules. For the jestjs version, there is a solution to the issue. The update was made to fix a couple of bugs. The first bug was caused by using the same variable to control both images. The second bug happened because the src of the image in the second div was accidentally set to the same as the first one. To avoid these issues, it is better to move static images to a separate folder in the react app. For instance, you can move the whole folder “img” to the public folder and use the “featured_image” value as an example. Putting files in the public folder prevents them from being processed by webpack.


Solution 1:

It’s advisable to relocate static images to the

public

folder in your React app.

Example of the featured image value can be seen in

'img/1.jpg'

assuming that the entire “img” folder has been relocated to the “public” directory.

What’s the reason for placing them in the public directory? Response:

  • Files added to the public folder will not undergo webpack processing and will instead be directly copied to the build folder.
  • The aim is to provide uniform access to the file (html/img) components/pages, regardless of how deep the component is located in the folder structure.


Solution 2:


As you are currently using JavaScript within the parentheses, it is recommended to employ string interpolation.

style={{ backgroundImage: `url(${featured_image})`}}

Frequently Asked Questions