CODEWITHSUNDEEP
javascriptreactjsimagesrc
Kinston
Kinston

Reputation: 113

Image not loading when passing a prop to <img src="this.prop." /> in React

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>
        )
    }
}

Upvotes: 2

Views: 11084

Answers (3)

Inshal Ayaz
Inshal Ayaz

Reputation: 1

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" />

Upvotes: 0

Kinston
Kinston

Reputation: 113

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?

Upvotes: 5

xuscrus
xuscrus

Reputation: 117

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/

Upvotes: -1

Related Questions