0

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;
Mike 'Pomax' Kamermans
  • 49,297
  • 16
  • 112
  • 153
Ayesha
  • 211
  • 1
  • 2
  • 13
  • 2
    What do you do when you say you "run the code"? Do you run an http server and then access your page via http://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 Feb 18 '20 at 16:13
  • Are you using webpack? What's your config? You need to use `url-loader` to load images in react component. – demkovych Feb 18 '20 at 16:16
  • @Mike'Pomax'Kamermans you can initialise state without a constructor for a React class component, it calls class field declarations – demkovych Feb 18 '20 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 Feb 18 '20 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: https://stackoverflow.com/questions/42118296/dynamically-import-images-from-a-directory-using-webpack. – ROOT Feb 18 '20 at 16:26
  • I had this problem one day and it was because chrome was preventing the application to access local files. Try that's suggested in this [topic] (https://stackoverflow.com/questions/18586921/how-to-launch-html-using-chrome-at-allow-file-access-from-files-mode). I also suggest to try it offline and not these flag on a daily basis -- Also, check the console, there is probably some errors – Arnaud Claudel Feb 18 '20 at 16:26

1 Answers1

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}`)} />)}
demkovych
  • 7,827
  • 3
  • 19
  • 25
  • 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. – Ayesha Feb 19 '20 at 12:30
  • 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/ – demkovych Feb 20 '20 at 09:21