Image doesn't show up with props in ReactJS

Question

I have a local image and I want to put on my webpage with Props. I did src={require('../images/my-image.png')} but it didn't work. It only works with importing the image file, But I want it to be dynamic.

The resulting img element is this:

App.js:

export default function App() {
  return (
      <div className="App">
        <Cards img="my-image.png" />
      </div>
  )
}

Cards.js:

export default function Card(props) {
  return (
    <div>
      <img src={`../images/${props.img}`} />
    </div>
  )
}

Totally, I can not put image file in src attribute in JSX, even something like this: <img src="../images/my-image.png" />

How specifically does this fail? In the rendered HTML in your browser, what is the resulting `` element? What is the `src` attribute of that element? Does the browser make a request for that image URL? What is the server's response? — David, Mar 16 '22 at 16:05
@David i'm pretty sure the location of the file tha I gave it to src is right. for the resulting of img element, check the post again, I edited it — saleh, Mar 16 '22 at 16:15
@saleh: Being "pretty sure" is a good start, but actually debugging and observing will be much more useful. Use your browser's debugging tools to observe the actual results. What is the exact HTML for that ``? In the network tab of the debugging tools, is a request made for the image file? What is the server's response? Don't assume, debug and observe. — David, Mar 16 '22 at 16:17
@David I checked it in Dev Tools. the `src` of img element is the same with what my image location is — saleh, Mar 16 '22 at 16:24
You should move your assets to the public folder instead of keeping them in the src folder. Also, you can use CDN for images if available. Please refer to this link: https://stackoverflow.com/questions/58553309/react-load-images-local-from-json . My Working Code Link : https://codesandbox.io/s/zealous-borg-usgyqv — shalini mandal, Mar 16 '22 at 16:27
@shalinimandal I did it but it gives me this error: `Module not found: You attempted to import ../../public/images/airbnb-logo.png which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.` — saleh, Mar 16 '22 at 16:33
Please check out codesanbox link in my comment. You dont need to import the image. Use it like this: — shalini mandal, Mar 16 '22 at 16:36
@saleh, a functional approach to import all (using `importAll`) the images can be done — Abin Thaha, Mar 16 '22 at 16:38
@shalinimandal thank you so much it worked!! if you want, post it as the answer to accept your answer. — saleh, Mar 16 '22 at 16:43
@saleh: And what is the server's response for the request of that image? You keep insisting that everything is correct instead of observing the actual results. Your code [demonstrably works](https://codesandbox.io/s/zealous-swirles-0d34dt?file=/src/App.js) as-is, provided that the image is actually available where you assume it is. — David, Mar 16 '22 at 16:43

score 2 · Accepted Answer · answered Mar 16 '22 at 16:45

You should move your assets to the public folder instead of keeping them in the src folder. Also, you can use CDN for images if available.

Please refer to this link: React, load images local from json

My Working Code Link: https://codesandbox.io/s/zealous-borg-usgyqv

score 0 · Answer 2 · answered Mar 16 '22 at 16:17

0

hello if you want to make the image url dynamic you can write it like this :

<img src={require(`../images/${image}`)} alt="product" />

reference : Load images based on dynamic path in ReactJs

answered Mar 16 '22 at 16:17

fadzrinmadu

63
5

It doesn't work :[ In Dev Tools the `src` of img element became to [object Module] – saleh Mar 16 '22 at 16:29

score 0 · Answer 3 · answered Mar 16 '22 at 16:40

Can you check the importAll work for you? Check the below link and confirm if this work for you.

Dynamically import images from a directory using webpack

At the end of importAll, you will have an array of all the images, and based on your requirement, you can pass the specified image as prop to Cards.js

Justin Meskan · Answer 4 · 2022-03-16T20:53:49.650

This is very simple if you have a 'png' all you have to do is import the 'png' then pass it as a prop. Your mistake is trying to use a relative path:

This is not correct <img src={../images/${props.img}} />

This is the correct way : <img src={props.img}/>

If you want to load an SVG the best way is to convert it into a React component like this.

import React from 'react'

export default function MySVG() {

   return (
    <svg className="leftArrowSvg" width="6px" height="10px" viewBox="0 0 6 10" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <g id="Version-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round">
            <g id="Replay-Meeting---Key-Word-Tag" transform="translate(-37.000000, -40.000000)" stroke="#ffffff" strokeWidth="2">
                <g id="Header" transform="translate(0.000000, 24.000000)">
                    <g id="Back-Button" transform="translate(38.000000, 8.000000)">
                        <polyline id="Arrow" transform="translate(2.000000, 13.000000) rotate(-360.000000) translate(-2.000000, -13.000000) " points="4 9 0 13 4 17"> </polyline>
                    </g>
                </g>
            </g>
        </g>
    </svg>
)

}

Image doesn't show up with props in ReactJS

4 Answers4