How to render local images in React js

Question

I just want to render my local images which I have saved locally in my 'images' Folder. I Have imported the whole images folder. In my state I have added the Src properties ( Please see the image below). SomeWhere I am making very stupid mistake, I have tried to google and see some of the Youtube videos. But Nothing getting the answer I want. When i run the Code I dont see any image there. Any Help Will be Appreciated! Thanks

import * as React from 'react';
import "../setStateFunctionExample/images/";
class ImageSlider extends React.Component {
    state= {
        images: [ {
            id: 1, src: "./images/image1.jpg", alt: "fruitLogo"
        }
        ,
        {
            id: 2, src: "./images/image2.jpg", alt: "fruitLogo1"
        }
        ,
        {
            id: 2, src: "./images/image3.jpg", alt: "fruitLogo2"
        }
        ],
        idx: 0
    }
    ;
    render() {
        return( <div> <h3>setState() example</h3> <img src= {
            this.state.images[0].src
        }
        alt= {
            this.state.images[0].alt
        }
        /> </div>)
    }
}

export default ImageSlider;

What do you do when you say you "run the code"? Do you run an http server and then access your page via localhost? Also, as per SO policy, do not show screenshots of text, put the text itself in your post. If you get an error, copy and paste that error. In addition to that, where's your class constructor? I'm not seeing a constructor(props) { super(props); this.state = { ... } } function here. — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Feb 18, 2020 at 16:13
Are you using webpack? What's your config? You need to use url-loader to load images in react component. — demkovych
– demkovych, Commented Feb 18, 2020 at 16:16
@Mike'Pomax'Kamermans you can initialise state without a constructor for a React class component, it calls class field declarations — demkovych
– demkovych, Commented Feb 18, 2020 at 16:17
you certainly can, but unless you're post-optimizing because your code is done, it's a great idea to do things with a constructor. And this code looks like someone trying to teach themselves React, so sticking with what the React tutorial teaches you until you've understood React is not a bad idea. — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Feb 18, 2020 at 16:20
You are trying to import a directory that contain all the images, then giving the src attribute a relative path, this might not work without Webpack help to give you the bundle/public path for the images, I think this will help: stackoverflow.com/questions/42118296/…. — ROOT
– ROOT, Commented Feb 18, 2020 at 16:26

demkovych · Accepted Answer · 2020-02-18 16:22:03Z

2

You can import images dynamically with require:

state= {
    images: [ {
        id: 1, src: "image1.jpg", alt: "fruitLogo"
    }
    ,
    {
        id: 2, src: "image2.jpg", alt: "fruitLogo1"
    }
    ,
    {
        id: 2, src: "image3.jpg", alt: "fruitLogo2"
    }
    ],
    idx: 0
}

....
{this.state.images.map(item => <img src={require(`./images/${item.src}`)} />)}

answered Feb 18, 2020 at 16:22

demkovych

9,0553 gold badges23 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ayesha Over a year ago

thanks first of all, I tried to use require as you mention but its still not working for me. It shows error message like: " Error: Cannot find module '././images/image1.jpg ' ", Do I have to install some type of loader, Will be grateful for your help.

demkovych Over a year ago

If you are using webpack, you need to install url-loader. Just google it. As a variant, you can try to change a path to your images, for example: /images/ or just images/

Collectives™ on Stack Overflow

How to render local images in React js

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related