Images from array in an object not displaying using React.js - arrays

Question

I am having problems rendering images from array in carousel. Here is what I am doing
This is my object that has the array I want to map
export const data = [
{
id: 1,
name: "Some name ",
desc: "Some desc",
img: ("../../images/secondary/placeholder.jpg"),
},]
export const projectsData = {
1: {
title: "Some title 2",
subtitle: 'Some subtitle 2',
description: 'Lorem 2 ',
images: [
("../../images/photos2/2osnova1.png"),
("../../images/photos2/2osnova2.png"),
("../../images/photos2/2osnova3.png"),
("../../images/photos2/2presek1.png"),
("../../images/photos2/2presek2.png"),
("../../images/photos2/2pogled1.png"),
("../../images/photos2/2pogled2.png"),
("../../images/photos2/2pogled3.png")
]
}
}
here is the component
import React, { Component } from "react";
import Carousel from "react-bootstrap/Carousel";
import ControlledCarousel from "./ControlledCarousel";
import { useParams } from "react-router-dom";
import { projectsData } from "./dataapp";
export default function Appartments() {
let { id } = useParams();
let curProject = projectsData[id];
return (
<div>
<div className="left-wrapper">
<h1>{curProject.title}</h1>
<h2>{curProject.subtitle}</h2>
<p>{curProject.description}</p>
</div>
<div className="right-wrapper">
<ControlledCarousel images={curProject.images} />
</div>
</div>
);
}
and here is the carousel I want to display them in
import React, { Component, useState } from "react";
import Carousel from "react-bootstrap/Carousel";
function ControlledCarousel(images) {
const [index, setIndex] = useState(0);
console.log(images.images);
const handleSelect = (selectedIndex, e) => {
setIndex(selectedIndex);
};
return (
<div>
{images.images.map((projectsDataApp, index) => {
return (
<div>
<Carousel activeIndex={index} onSelect={handleSelect} indicators={false}>
<Carousel.Item interval={1000000} >
<img src={`${projectsDataApp.images}`} alt="" className="imgdummy" />
</Carousel.Item>
</Carousel>
</div>
);
})}
</div>
);
}
I tried placing the images both in src and public, also tried importing them from Imgur and Google Images, but nothing works. And there is no error message and when I console.log the images, it shows the array.

Answer 1

so there is many problems it seems like :
you are putting a list inside the src attribute which is wrong
additionally it seems like you are trying to access images the aren't stored in the 'public' directory which isn't visible to the browser... in case of storing images in the 'src' dir you should import them first and use the values imported as the src file...
to post an image in a file you should import it, or access a file that exist in the public directory :
for example :
import imgSrc from '../../images/photos2/2osnova1.png"'
function Image(){
return <img src={imgSrc}/>
}
for your case (if you did put it in public) :
try to render many components for each img src:
instead of:
<Carousel.Item interval={1000000} >
<img src={`${projectsDataApp.images}`} alt="" className="imgdummy" />
</Carousel.Item>
do:
{projectsDataApp.images.map(imageSrc=><Carousel.Item interval={1000000} >
<img src={`${imageSrc}`} alt="" className="imgdummy" />
</Carousel.Item>)}

Answer 2

There are a couple of errors with your code. First, the way you're handling props and there are images of images everywhere. I cleaned it up a bit and renamed a few variables to make more sense. Your img's src were undefined that's why you couldn't display the images.
I checked the code with images from unsplash. The code below works fine. If you want to host the images from the public folder, make sure the path is correct. If there is an images folder inside the public folder, your path will look like this: /images/something.jpg.
You also don't want to have two variables named index accessible from the same scope. I also changed them.
Another error was how you wanted to include the images inside the Carousel. You should have one Carousel component, and many Carousel.Item components with the images inside. So you need to map over the images array inside the Carousel component. Also, in React, if you iterate over an array, you need to add a key prop. In this case it's <Carousel.Item key={i} ....
const projectsData = {
1: {
title: "Some title 2",
subtitle: "Some subtitle 2",
description: "Lorem 2 ",
images: [
"https://source.unsplash.com/WLUHO9A_xik/800x450",
"https://source.unsplash.com/PLsEI2ZOrGA/800x450",
"https://source.unsplash.com/L8o2sIPSOnc/800x450",
"https://source.unsplash.com/6Pg2ms04ouM/800x450",
"https://source.unsplash.com/7ZWVnVSaafY/800x450",
"https://source.unsplash.com/O6RPWul11XI/800x450",
"https://source.unsplash.com/LcnNWTCkzUU/800x450"
]
}
};
function ControlledCarousel({ images }) {
const [index, setIndex] = useState(0);
const handleSelect = (selectedIndex, e) => {
setIndex(selectedIndex);
};
return (
<Carousel activeIndex={index} onSelect={handleSelect} indicators={false}>
{images.map((image, i) => (
<Carousel.Item key={i} interval={1000}>
<img src={image} alt="" className="imgdummy" />
</Carousel.Item>
))}
</Carousel>
);
}
function App() {
let { id } = useParams();
let curProject = projectsData[id];
return (
<div>
<div className="left-wrapper">
<h1>{curProject.title}</h1>
<h2>{curProject.subtitle}</h2>
<p>{curProject.description}</p>
</div>
<div className="right-wrapper">
<ControlledCarousel images={curProject.images} />
</div>
</div>
);
}

Answer 3

There's a simple way to do this.
const Images = [
{
id: 0,
image: require("../../Assets/Images/Icons/atom.png").default,
},
];
export default Images;
Replace your own image/icon at location from src folder ✌

Answer 4

I found the problem in my array it should be like this
1: {
title: "Some title 2",
subtitle: 'Some subtitle 2',
description: 'Lorem 2 ',
images: [
{
image: "../../images/photos2/2osnova1.png"
},
{
image: "../../images/photos2/2osnova1.png"
}, {
image: "../../images/photos2/2osnova1.png"
},
]
}
}
instead of my previous
export const projectsData = {
1: {
title: "Some title 2",
subtitle: 'Some subtitle 2',
description: 'Lorem 2 ',
images: [
("../../images/photos2/2osnova1.png"),
("../../images/photos2/2osnova2.png"),
("../../images/photos2/2osnova3.png"),
("../../images/photos2/2presek1.png"),
("../../images/photos2/2presek2.png"),
("../../images/photos2/2pogled1.png"),
("../../images/photos2/2pogled2.png"),
("../../images/photos2/2pogled3.png")
]
}
}