javascript - How to get Image Url from local Json file in React.js - Stack Overflow

admin管理员组

文章数量:1301536

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

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

• javascript
• reactjs

Share Follow asked Aug 4, 2020 at 19:01 EliftchEliftch 23811 gold badge44 silver badges1414 bronze badges 2

• can you see if any errors in network tab Developers Console? like file not found something? – 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 Commented Aug 4, 2020 at 21:34

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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.

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.

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 ponent (BlogCard).

2- Next thing, instead of using

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

Just go with:

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

Good Luck !!

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

本文标签： javascriptHow to get Image Url from local Json file in ReactjsStack Overflow