How can you use images in a list of objects and use them in react?-CodePudding

I imported pictures into my portfolio component and used each of them as a property in a list of objects. But when I try to send them over as a prop, the image disappears, and instead shows up as a missing picture. If I made an image tag with the pictures within the component I import them in, they appear just fine. But when I pass them as a prop, that's when they disappear. I import them in a Portfolio component, and try to send them as a prop in a Project component. Someone said earlier to not try to pass an object to a src attribute, and instead try to send the image url as a prop, but if I'm using a the map function to go through each element, I'm not sure how I can send each image URL.

Here is a few of the imports in the Portfolio component:

import video_player from "../../images/portfolioImages/video_player.png";
import weather_app from "../../images/portfolioImages/weather_app.png";

Here is a bit of the array of objects:

const projects = [
  {
    name: "Real-Time-Chatroom",
    type: "Web Page",
    description:
      "Discord-like webpage that allows for several different users to send messages to a variety of different servers/chatrooms.",
    picture: { chatroom },
  },
  {
    name: "Weather App",
    type: "Web Page",
    description:
      "Weather application that uses user's location to find the correct weather, and display that information on screen, with CSS styling that changes depending on the weather conditions of the user's area.",
    picture: { weather_app },
  },
];

And here is my Projects component code:

import React from "react";
import "./Project.css";

const Project = ({ name, type, description, image }) => {
  return (
    <div className="project">
      <h1>{name}</h1>
      <img src={image} alt={name}/>
    </div>
  );
};

export default Project;

CodePudding user response：

Here's an example of how you can update your code to correctly use the images in the projects array:

import React from "react";
import "./Project.css";

// Import the image files
import chatroom from "./chatroom.jpg";
import weather_app from "./weather_app.jpg";

const projects = [
  {
    name: "Real-Time-Chatroom",
    type: "Web Page",
    description:
      "Discord-like webpage that allows for several different users to send messages to a variety of different servers/chatrooms.",
    image: chatroom, // Use the imported image value as the image URL
  },
  {
    name: "Weather App",
    type: "Web Page",
    description:
      "Weather application that uses user's location to find the correct weather, and display that information on screen, with CSS styling that changes depending on the weather conditions of the user's area.",
    image: weather_app, // Use the imported image value as the image URL
  },
];

const Project = ({ name, type, description, image }) => {
  return (
    <div className="project">
      <h1>{name}</h1>
      <img src={image} alt={name} />
    </div>
  );
};

export default Project;

In this updated code, we import the image files using the import statement, and then we use the imported value as the src attribute for the img element in the Projectcomponent. This will ensure that the correct image is displayed for each project in theprojects` array.

Once you've updated your code to import and use the image files correctly, you can use the projects array to render a list of Project components in your application. Here's an example of how you can do this using the map() method:

import React from "react";
import Project from "./Project";

function App() {
  return (
    <div className="app">
      {projects.map((project) => (
        <Project
          name={project.name}
          type={project.type}
          description={project.description}
          image={project.image}
        />
      ))}
    </div>
  );
}

export default App;

In this example, we use the map() method to iterate over the projects array and render a Project component for each item in the array. We pass the name, type, description, and image properties from each object in the projects array to the Project as component