传递道具时图像未加载<img src=“this.prop.” />在反应中

Question

I have an issue regarding a link not loading my image when I pass a prop to the attribute src of img. I have tried wrapping require() around my links and it didn't work.

I have a huge library of products which would be unfeasible to manually import images using the image loader.

Therefore, is there a way to load an image using props inside the src attribute?

I am using NODE_PATH=src/

Thanks for the help!

 export const productLib = [{ ID: "001", name:"product name", src: "lib/productLib/img/product_name", color: "", ... }, {...}]

 import React from 'react'; export class Products extends React.Component { render() { return( <div className="products"> <img src={this.props.product.src} width="50" /> <h6>{this.props.product.name}<span className={`block ${this.props.product.color}`}></span></h6> </div> ) } }

Answer 1

As recommended by Xuscrus, I linked my images using the public path. I had to remove my absolute path in order for this solution to work.

I moved all of my images inside a folder named "img" inside the public folder of my create-react-app.

With the example used in my initial statement, here is the easiest solution I found:

 import React from 'react'; export class Products extends React.Component { render() { return( <div className="products"> <img src={`/img/${this.props.product.src}.png`} width="50" /> <h6>{this.props.product.name}<span className={`block ${this.props.product.color}`}></span></h6> </div> ) } }

My main reference for my solution was this post (URL method in the correct answer) :

How to do Dynamic images in ReactJS?

Answer 2

I think issue is related with the way you are sending the url to the component.

"lib/productLib/img/product_name" is not an url, not relative url also.

You can use import to get the image.

 import React from 'react'; import logo from './logo.png'; // Tell webpack this JS file uses this image console.log(logo); // /logo.84287d09.png function Header() { // Import result is the URL of your image return <img src={logo} alt="Logo" />; } export default Header;

If you are using react-create app

they resolve the problem for you: https://create-react-app.dev/docs/adding-images-fonts-and-files/

Answer 3

I came across a similar issue in fact I was searching for the solution at the moment but figured it out myself I have Images store in a separate folder and I'm importing them in the data file and then Passing it to the component where I needed it, but the image was not displaying.

All I did was

//img is the variable I'm getting the image path at
console.log(img)

That returned

Module {default: "/static/media/svg-1.af890272.svg", __esModule: true, 
Symbol(Symbol.toStringTag): "Module"}
default: "/static/media/svg-1.af890272.svg"
Symbol(Symbol.toStringTag): "Module"
__esModule: true
[[Prototype]]: Object

After Getting this in the Module Object I saw the default value so just do

img = img.default

And now you can pass it in src

import React from 'react';

<img src={img} width="50" />