Question 220841 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – dynamic images not loading in react

I am trying to build a dynamic application. When you click on the picture it should change to a different picture. Therefore I stored the src paths in an array called arrays. Then for the image instead of hardcoding the imagepath I tried using the name of the array ‘arrays’ and the position of the path I want. However both of the pictures are not loading and I don’t understand why.
I tried using require already but it didn’t work either. Maybe someone knows why it dosen’T work?
Thanks.

I also asked chat gpt to code me an example of how to output the images dynamically and it coded this:

> import React,{useState} from 'react';
> import './Secondphoto.css';
> //import ImageArray from './ImageArray.js';
> 
> const Secondphoto = (props) => {
> const arrays = ["../images/mantelfrau.jpg", "../images/whitewoman.jpg", "../images/arraypicthree.jpg", "../images/arraypicfour.jpg", "../images/arraypicfive.jpg","../images/arraypicsix.jpg"]
> const [clicked, setClicked] = useState(false);
> console.log(clicked);
> const selectedImageIndex = 1;
> const selectedImageURL = arrays[selectedImageIndex];
> return(
>     <div className="flex_container_secondphoto">
>         <img src={selectedImageURL} alt="woman wearing something white" className="secondphoto" onClick= {() => setClicked(true)}/>
>     </div>
> )
> }
> 
> export default Secondphoto;

but it didn’t work either.

Tags:

2

Answers


  1. 0

    Use Usestate for both array of images and index

    import React, { useState } from "react";
import "./Secondphoto.css";

const Secondphoto = (props) => {
    const [imageArray, setImageArray] = useState([
        "../images/mantelfrau.jpg",
        "../images/whitewoman.jpg",
        "../images/arraypicthree.jpg",
        "../images/arraypicfour.jpg",
        "../images/arraypicfive.jpg",
        "../images/arraypicsix.jpg",
    ]);
    const [selectedImageIndex, setSelectedImageIndex] = useState(0);
    return (
        <div className="flex_container_secondphoto">
            <img
                src={imageArray[selectedImageIndex]}
                alt="woman wearing something white"
                className="secondphoto"
                onClick={() =>
                    setSelectedImageIndex(
                        (selectedImageIndex + 1) % imageArray.length
                    )
                }
            />
        </div>
    );
};

export default Secondphoto;

    here (selectedImageIndex + 1) % imageArray.length loop over all the images in the array

    Login or Signup to reply.
  2. 0

    to make this work u need to do some changes.
    first, you’r SecondPhoto should look like this:

    function SecondPhoto({image, onImageClicked}){
    return(
        <div className="flex_container_secondphoto">
            <img src={require(`../${image}`)} alt="woman wearing something white" className="secondphoto" onClick={onImageClicked}/>
        </div>
)
}
export default SecondPhoto;

    and the component that contain the image will look:

    const arrays = ["images/mantelfrau.jpg", "images/whitewoman.jpg"...];
const [index, setIndex] = useState(0);
const onImageClicked = () => {
setIndex(index === arrays.length - 1 ? 0 : index + 1);
}
return(
    <div className="flex_container_secondphoto">
        <SecondPhoto image={arrays[index]} onImageClicked={onImageClicked} />
    </div>
)
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search