How to render images from code inside a create-react-app project

user_4294360 0
Viewed 657

In my app I have some css that has this:

background-image: url("../../assets/img/webheader.jpg");

And that loads an image from this url: http://localhost:3000/static/media/webheader.e3104798.jpg

Now, for dev purposes, I want to load that image from code inside a component, and I get the path like this:

function getImages() {
    var prefix = process.env.PUBLIC_URL;
    let images = [
         prefix + '/assets/img/webheader.jpg'
    ];
    return images;
}

According to this doc https://create-react-app.dev/docs/using-the-public-folder , I have to get the prefix from process.env.PUBLIC_URL; or by using %PUBLIC_URL%.

The former gives me an empty string for the prefix, and the latter gives me this error after rending the img:

**URIError: Failed to decode param '/%PUBLIC_URL%/assets/img/webheader.jpg'**

Rendering an img HTML element with the values from that array just give me an status code Status Code: 304 Not Modified

What could be the problem?

I got asked how I'm using getImages()

I have a component that has a constructor:

 class Portafolio extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            images: getImages()
        };
    }
    render() {
        return (
            <div>
                <NavBar/>
                <div className="container">
                    <GradientImages imageList={this.state.images}/>
                </div>
            </div>
        );
    }
}

Inside that GradientImages, I render this:

let images = this.props.imageList;
    let imagesHtml = images.map((url, index) => (
        <div className="gradient-wrap" key={index}>
            <img src={url} className="img-responsive" alt={'image ' + index}></img>
        </div>
    ));
create-react-app reactjs
2 Answers

Both process.env.PUBLIC_URL and %PUBLIC_URL% are for referring to files in the public folder from js and html files respectively. If you want to use an image url which lives in your project files, you can simply import it and use it like this:

import webHeaderImage from '../assets/img/webheader.jpg';

console.log(webHeaderImage); // http://localhost:3000/static/media/webheader.e3104798.jpg

function getImages() {
    let images = [
         webHeaderImage
    ];
    return images;
}

When you import an asset like this, url-loader or file-loader will take care of it, giving you a URL and copying the file into the output directory.

user_63852590

When using Webpack you need to require images in order for Webpack to process them, which would explain why external images load while internal do not, so instead of

<img src={'/webheader.jpg'} />

you need to use

<img src={require('/webheader.jpg')} />

replacing webheader.jpg with the correct image name for each of them.

That way Webpack is able to process and replace the source image.

user_142687800
Related