How to get Image Url from local Json file in React.js

Question

I want to be able to display images from a local folder by getting the URL from JSON file. So far I've tried :

src={require(blog.imUrl)} src={blog.imgUrl} src={require(${blog.imgUrl})}

Errors i am getting when I use require :

Error: Cannot find module '../../images/safe-image.jpeg'

import { useHistory } from 'react-router-dom';
import { Col, Row, Container, Image } from 'react-bootstrap';
import blogArticles from './blog.json';
import './BlogCard.css';

export default function BlogCard() {
  const history = useHistory();

  function handleClick() {
    history.push('/`${blog.id}`');
  }

  return blogArticles.map((blog) => {
    return (
      <Container key={blog.id} className="blogContainer">
        <Row>
          <Col xs={6} md={6} lg={8}>
            <h3 className="blogTitle">{blog.title}</h3>
            <span className="blogBody">{blog.body.substring(0, 250)}...</span>
            <button onClick={handleClick} className="readMoreButton">
              Read More
            </button>
          </Col>
          <Col xs={4} md={4} lg={3} className="imageContainer">
            <Image src={require(blog.imgUrl)} roundedCircle />
          </Col>
        </Row>
      </Container>
    );
  });
}```


Here is my JSON File structure :

{
    "id": 3,
    "title": "abc",
    "body": "abcdefg",
    "author": "as",
    "imgUrl": "../../images/leon-biss.jpg"
}

can you see if any errors in network tab Developers Console? like file not found something? — Sowmyadhar Gourishetty
– Sowmyadhar Gourishetty, Commented Aug 4, 2020 at 19:06
I am getting 304. it shows as if it's getting the image but there is no preview — Eliftch
– Eliftch, Commented Aug 4, 2020 at 21:34

yaya · Accepted Answer · 2020-08-04 19:35:33Z

6

You can use this for importing and showing an image which is on src folder (next to javascript files):

import img from "./img1.png";
const imgComponent = () => <img src={img} />

But since you want to load images from json file dynamically, you should put your images inside a folder like images in public folder (public/images/img1.png), then you can render it with:

<img src="/images/img1.png" />

Note1: note that currently your json file contains the pathes relative to script file, but you should change it to the path of image in public folder instead. (if you can't change the json file, you can map that url with code also.)
Note2: i assumed that you are using creat-react-app which it has public folder by default. if you don't have it, search for how to serve static files in react.

edited Aug 4, 2020 at 19:35

answered Aug 4, 2020 at 19:25

yaya

8,3311 gold badge48 silver badges44 bronze badges

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

3 Comments

Eliftch Over a year ago

thanks for your answer. I tried it and I got this error : Module not found: You attempted to import ../../../public/images/safe_image.jpeg which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

yaya Over a year ago

@Eliftch .. means the parent folder to script. ../../../public/images/safe_image.jpeg means go 3 level up (parent -> parent -> parent), then access the public folder. the purpose of public folder is to serve assets to be accessible publicly. so you should change it to: /images/safe_image.jpeg because everything in public folder is accessible from the root url. also you shouldn't require or import it. you should use it like : <img src="/images/safe_image.jpeg" /> .

yaya Over a year ago

@Eliftch here is an example: github.com/ya3ya6/ReactPlay1/blob/stack/src/stackoverflow_play/… it shows this image in public folder: github.com/ya3ya6/ReactPlay1/blob/stack/public/logo192.png.

AWESOME WORLD · Accepted Answer · 2021-07-11 11:38:10Z

2

I was having this same issue because I had created an image folder inside the src folder and as a result i was unable to display the image. All I had to do to fix this was to:

move the image folder inside the public folder at the project root folder.
from the json file, call the image like "/images/productImages/product1.jpeg" .

Hope this solves it for you also.

answered Jul 11, 2021 at 11:38

AWESOME WORLD

1091 silver badge7 bronze badges

Comments

Ali Akbar · Accepted Answer · 2022-02-07 11:27:01Z

0

Bro, I was working on this problem and eventually figure it out:

1- All you need to do is changing the path of the image from your JSON file. That means the path should be related to your react component (BlogCard).

2- Next thing, instead of using

<MyComponent
    image={release.imageURL}  // ==> WRONG
/>

Just go with:

<MyComponent
    image={`${release.imageURL}`} // ===> CORRECT
/>

Good Luck !!

answered Feb 7, 2022 at 11:27

Ali Akbar

418 bronze badges

Comments

Super Kai - Kazuya Ito · Accepted Answer · 2022-02-10 08:55:56Z

0

Simply react works by rendering jsx so At first always try to maintain javascript or variables before return or render so js works properly in react app . You can try this method and keep your images in public folder. 1.

import { Col, Row, Container, Image } from 'react-bootstrap';
import img from '../path

export default function BlogCard() {

  return (
    <Image src={img} roundedCircle />
  );
});

edited Feb 10, 2022 at 8:55

Super Kai - Kazuya Ito

42.7k23 gold badges258 silver badges257 bronze badges

answered Feb 7, 2022 at 11:53

Build Though

4526 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to get Image Url from local Json file in React.js

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related