CODEWITHSUNDEEP
javascriptreactjs
Eliftch
Eliftch

Reputation: 238

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

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"
}

Upvotes: 3

Views: 8078

Answers (4)

Build Though
Build Though

Reputation: 442

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 />
  );
});

Upvotes: 0

Ali Akbar
Ali Akbar

Reputation: 41

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 !!

Upvotes: 0

AWESOME WORLD
AWESOME WORLD

Reputation: 109

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.

Upvotes: 2

yaya
yaya

Reputation: 8243

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.

Upvotes: 6

Related Questions