how to show images in react using a loop

Question

i have this array of objects i am looping through to display its data, however when i am using the img tag in the loop, images won't show

i have tried using react-image, doesn't render obviously. i realized that if the src is a path instead of a link, image doesn't show, it only shows if the src was a link

// App.js
import React, {Component} from 'react';
import './App.css';
import { projects } from './myData';
import Img from "react-image";

class App extends Component {
  render(){
            return (
              <div className="App">

                {projects.map(p => {

                  return <img key={p.id} src={p.src} alt="can't show image" />;
                })}
              </div>
            );
          }
}

export default App;

// myData.js
export const projects = [
         {
           id: 1,
           name: "Tic Tac Toe game",
           src: "http://www.m9c.net/uploads/15682238971.gif"
         },
         {
           id: 2,
           name: "Tic Tac Toe game",
           src: "./images/tictactoe.gif"
         }
       ];

i wanna be able to use local path to show the images, my whole project doesn't communicate with a server an i don't need it to.

So when you look at this app, what does it say in the browser's address bar? I.e. where and how is it hosted? — user5734311
– user5734311, Commented Sep 11, 2019 at 18:35
What does that mean? What does it say in the address bar? Is the URL starting with file:///? Are you building using webpack? create-react-app? Did you put the images in the public folder? — user5734311
– user5734311, Commented Sep 11, 2019 at 18:43
Are you using webpack ? You might need a file-loader or make sure your images are in your public folder — cullanrocks
– cullanrocks, Commented Sep 11, 2019 at 18:45
i had the photo placed in the public folder now, altered the path and it works! to be honest i'm a beginner and this hasn't cross my mind before, although i asked around before posting here ^^, thanks anyway! — Hamoghamdi
– Hamoghamdi, Commented Sep 11, 2019 at 19:09

cullanrocks · Accepted Answer · 2019-09-11 18:36:50Z

1

Your source is looking at {props.src} instead of {p.src}

   <div className="App">
    {projects.map(p => {
      return <img key={p.id} src={p.src} alt="can't show image" />;
    })}
   </div>

answered Sep 11, 2019 at 18:36

cullanrocks

4974 silver badges18 bronze badges

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

2 Comments

user5734311 Over a year ago

Well spotted, however OP's code would cause an error and they wouldn't see any images, so we can assume this error isn't in their actual code.

Hamoghamdi Over a year ago

you're right, fixed it, that was just a copy paste problem. i tried using different component but nothing changed

brayanarrieta · Accepted Answer · 2019-09-11 20:21:16Z

0

Hello I think taht maybe the problem can be related to the path to the image, because the implementation it's good, but maybe try another approach.

This is a sample of how load a local image in the same folder.

import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image

console.log(logo); // /logo.84287d09.png

function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />;
}

export default Header;

answered Sep 11, 2019 at 20:21

brayanarrieta

1394 bronze badges

Comments

Poploy · Accepted Answer · 2023-06-18 22:30:37Z

I encountered this issue, but I managed to resolve it using the following code. Please note that I'm currently using React with TypeScript. I hope this code can provide you with some guidance in solving your own issue.

This is the method I used to concatenate the pathname of my image. It's important to note that I utilized the require function, which effectively resolved the problem I was facing.

const findProductImage = (path: string) => {
    const result = path.slice(8);
    return require(`../images/${result}`);
}

in my html

<Box m="auto" sx={{ position: "relative", width: {md:"100%", xs:"80%"} }}>          
     {data.map((item) => (
         <Stack key={item._id} direction="row" spacing={2} sx={{ width: "100%" }}>
              <img src={findProductImage(item.imagePath)} alt="image" width="100%" height="100%" />
         </Stack>
      ))}        
</Box>

Collectives™ on Stack Overflow

how to show images in react using a loop

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related