Help image it's not showing in React

JavaScript
1

Hi,
I have a data.json file containing all the data of the application. In this same file there is the source of the different images that are placed in my project locally. The Profile component return each image and comment thanks to the map() method. my problem is the following I would like to display the images but I have an error << Uncaught Error: Cannot find module ‘./images/avatars/image-maxblagun.png’>>
here is what I did :

// data.json 

{
  "currentUser": {
    "image": { 
      "png": "./images/avatars/image-juliusomo.png",
      "webp": "./images/avatars/image-juliusomo.webp"
    },
    "username": "juliusomo"
  },
  "comments": [
    {
      "id": 1,
      "content": "Impressive! Though it seems the drag feature could be improved. But overall it looks incredible. You've nailed the design and the responsiveness at various breakpoints works really well.",
      "createdAt": "1 month ago",
      "score": 12,
      "user": {
        "image": { 
          "png": "./images/avatars/image-amyrobson.png",
          "webp": "./images/avatars/image-amyrobson.webp"
        },
        "username": "amyrobson"
      },
      "replies": []
    },
    {
      "id": 2,
      "content": "Woah, your project looks awesome! How long have you been coding for? I'm still new, but think I want to dive into React as well soon. Perhaps you can give me an insight on where I can learn React? Thanks!",
      "createdAt": "2 weeks ago",
      "score": 5,
      "user": {
        "image": { 
          "png": "./images/avatars/image-maxblagun.png",
          "webp": "./images/avatars/image-maxblagun.webp"
        },
        "username": "maxblagun"
      },
      "replies": [
        {
          "id": 3,
          "content": "If you're still new, I'd recommend focusing on the fundamentals of HTML, CSS, and JS before considering React. It's very tempting to jump ahead but lay a solid foundation first.",
          "createdAt": "1 week ago",
          "score": 4,
          "replyingTo": "maxblagun",
          "user": {
            "image": { 
              "png": "./images/avatars/image-ramsesmiron.png",
              "webp": "./images/avatars/image-ramsesmiron.webp"
            },
            "username": "ramsesmiron"
          }
        },
        {
          "id": 4,
          "content": "I couldn't agree more with this. Everything moves so fast and it always seems like everyone knows the newest library/framework. But the fundamentals are what stay constant.",
          "createdAt": "2 days ago",
          "score": 2,
          "replyingTo": "ramsesmiron",
          "user": {
            "image": { 
              "png": "./images/avatars/image-juliusomo.png",
              "webp": "./images/avatars/image-juliusomo.webp"
            },
            "username": "juliusomo"
          }
        }
      ]
    }
  ]
}


// Profile.js

import React from 'react';
import t from '../images/avatars/image-amyrobson.png'

const Profile = (props) => {
  const {content, photo, username} = props

  const logo = require(photo);
  return (
    <div className='profile'>
        <div className='profile__img'>
            <div className='profile__img__information'>
                <div>
                    <img src={logo} alt="image fail"/>
                </div>
                <span>{username}</span>
                <span>1 month ago</span>
            </div>
            <div className='profil__img__reply'>Reply</div>
        </div>
        <p>{content}</p>
    </div>
  )
}

export default Profile
2

Hi! I see that in profile.js you import an image using …/images/… is profile.js in a different folder than data json?
maybe the problem is the location of those archives, i’m not sure but if you are passing those directions to the react component those directions are called when the component renders, then the direction that you have to enter must be relative to the component not to the json archive.

is the most probably cause i think

3

Thanks, but I’ve already found a solution.

4

Hi, I am also getting same type of error. I am importing in the same way from a data.json file but it is now showing…
And when i try to use the require method to show images from the prop method.

5

Hi, Please I’m also having the same issue with the json file images, please how were you able to show the image

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.