Reactjs Uncaught Error: Cannot find module '.png' when loading from a json file

Question

i'm trying to load some images whose path is stored inside a JSON file, in reactjs. My JSON file contains an array of objects in which there is the path of my images. Inside my component, i map my JSON data and can access every properties. Nevertheless, when i try to load the image, it keeps showing me the same error : Uncaught Error: Cannot find module '.png' when loading from a json file. Where i'm trying to load the image

My JSON file

I've added the import of my json file at the beginning of my file

import projects from "../data/importantProject.json"

The error

Has anyone experienced the same issue ?

I tried to add a based url, and a "" as I saw on the web but it keeps showing me the same error.

You should add your code as text rather than screenshots!

Antti_M
– Antti_M

2022-11-02 16:34:56 +00:00
Commented Nov 2, 2022 at 16:34 — Antti_M
– Antti_M, Commented Nov 2, 2022 at 16:34

Yves Bahoken · Accepted Answer · 2023-01-02 23:25:16Z

1

1 ----> In json file instead of full file path just write the file name ie : fap_logo.png

2 ----> In react component write <img src={require(`../assets/images/`+project.logo)} alt="image" />

edited Jan 2, 2023 at 23:25

answered Jan 2, 2023 at 23:23

Yves Bahoken

112 bronze badges

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

Comments

Ali Safari · Accepted Answer · 2023-03-09 02:32:49Z

0

You just need to set your image src as:

const imgsrc = require("../assets/images/"  +project.logo).default;

Note at 'default' at the end of the require method:

require(filepath).default

answered Mar 9, 2023 at 2:32

Ali Safari

1,81515 silver badges21 bronze badges

Collectives™ on Stack Overflow

Reactjs Uncaught Error: Cannot find module '.png' when loading from a json file

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related