Question 4380 in Artificial Intelligence Question posted in
ChatGBT is becoming a world-wide phenomena, try it out here.

Render image with json data | ReactJs – Artificial Intelligence

So I’m trying to make the addition of project easier for me with a json data.

Basically I’m creating blocks of projects and each project comes with an image, however even when the id == to the name I gave the image, the image does not render. Is there is any option for that or should I just give up on json files ?

The reactjs code

import Pdata from "../../api/projects.json";
import p1 from "../../img/Project/PoleAnglais.png";
import p2 from "../../img/Project/I-Art.png";
import p3 from "../../img/Project/Hestia.png";
import p4 from "../../img/Project/EvlV1.png";
import p5 from "../../img/Project/Kelly.png";
import p6 from "../../img/Project/EthLnyV2.png";
import { Component } from "react";
class Plist extends Component {
  render() {
    return (
      <div
        className="project-list"
        data-aos="fade-right"
        data-aos-duration="1200"
      >
        {Pdata.map((projectDetail, index) => {
          return (
            <div className="project-block">
              <h2 className="project-title">{projectDetail.title}</h2>
              <p className="date">{projectDetail.date}</p>
              <p className="project-desc">{projectDetail.desc}</p>
              <img src={projectDetail.id} alt="" />
              <p className="madewith">made with {projectDetail.tags}</p>
            </div>
          );
        })}
      </div>
    );
  }
}
export default Plist;

The json data

    [
  {
    "id": "p1",
    "title": "Pole Anglais",
    "date": "16/10/2019",
    "desc": "This project was in association with Filip Zafirovski, my English teacher by the time who wanted students to get a source of inspiration by publishing articles and/or their work. It was my very first web project, and was kind of hard to pull off but I still enjoyed it.Since for the very first time i coded for a project and not myself.",
    "tags": "Loads of crap"
  },
  {
    "id": "p2",
    "title": "Project I.Art",
    "date": "3/07/2021",
    "desc": "In France to go to college you have to get a diploma, which requires multiple exams to be validated. One of the subjects I had to do a presentation on was Art. I decided to create an idea around an Artificial Intelligence who would create art based on the likes and dislikes of the spectator. This panel is a website made for the occasion.",
    "tags": "Html,Scss, & AOS librairie"
  },
  {
    "id": "p3",
    "title": "Hestia Real Estate",
    "date": "18-26/10/2021",
    "desc": "At the very start of my student life @hetic, They grouped student randomly to make a project. The subject of the project was to create an agency, a fake web-app and website that sells premium submarines to plus ultra rich people. For that project I designed the website of the agency, and the app for the complex.",
    "tags": "Html & Scss"
  },
  {
    "id": "p4",
    "title": "EvL First Design",
    "date": "30/10/2021",
    "desc": "Before the design and dev of this portfolio, I had made a portfolio where I only putted my socials link. All of that because I had no idea of what to put on it. Even if I was satisfied with the first version it did not in any case represented the mood and emotion I wanted it to give. And so I gave birth to the actual design of the website on the 11/11/2021",
    "tags": "Nextjs & Scss"
  },
  {
    "id": "p5",
    "title": "Kelly's Portfolio",
    "date": "3/07/2021",
    "desc": "Sometimes after arriving at my college, I met a freshly made friend who wanted to publish her portfolio. She knew how to design and do plenty others thing. To She didn't really like to code and was making her website with Wix. To which I proposed to remake her website by coding it myself.",
    "tags": "VueJs & Scss"
  },
  {
    "id": "p6",
    "title": "EthLny V2",
    "date": "11-12/11/2021",
    "desc": "After doing the amazing portfolio of Kelly, I was kind of disappointed with my own. So I decided to remake a new design. Use a Random language, study the color psychology, searched a tagline. And TA-DA here it is, the website you're in right now is the result of 7 hours of researching, designing and coding and debugging.",
    "tags": "ReactJs, Scss & AOS librairy"
  }
]
Tags:

3

Answers


  1. 0

    I think the image is rendering but it is just too small to see

    try adding width and height.

     <img style={{width: 200px, height: 200px}} src={projectDetail.id} alt="" />
    Login or Signup to reply.
  2. 0

    I think this will solve your problem. instead of importing each image, either create a map that points P* to your image addresses or rename your images in a way that you can do this:

    {Pdata.map((projectDetail, index) => {
          return (
            <div className="project-block">
              <h2 className="project-title">{projectDetail.title}</h2>
              <p className="date">{projectDetail.date}</p>
              <p className="project-desc">{projectDetail.desc}</p>
              <img src={`../../img/Project/${projectDetail.id}.png`} alt="" />  // <====the change
              <p className="madewith">made with {projectDetail.tags}</p>
            </div>
          );
})}

    you can also add an image prop to your json pointing to the right image, but the json might be out of your hands to change.

    Login or Signup to reply.
  3. 0

    Put your images into object, so keys would be ids from json,and values – URLs to your images. Right now you are just passing string like "p1" and "p5" into src. It is not equivalent to passing value of variable with name p1 or p5.

    Fast way to create such object would be this:

    import p1 from "../../img/Project/PoleAnglais.png";
import p2 from "../../img/Project/I-Art.png";
import p3 from "../../img/Project/Hestia.png";
import p4 from "../../img/Project/EvlV1.png";
import p5 from "../../img/Project/Kelly.png";
import p6 from "../../img/Project/EthLnyV2.png";

let images = {
  p1, p2, p3, p4, p5, p6
}

/**
 It is same as let images = {p1: p1, p2: p2, p3: p3, p4: p4, p5: p5, p6: p6};
*/

    Then, inside your component use id from JSON as a key:

    <img src={images[projectDetail.id]} alt=""/>

    This way you will get actual value of variable p1 (and others).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search