Import Image from Json Source (Create-React-App)

How to import images from JSON data into create-react-app

we can not use require dynamically.you can change your data like this.

const data = [
    {
        "key": 1,
        "name": "Goal Squad",
        "techs": ["React & Redux", "Express", "MySQL"],
        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et",
        "image": require("../public/images/test.jpg")
    },
    {
        "key": 2,
        "name": "WesterosCraft",
        "techs": ["React & Redux", "Express", "MySQL"],
        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et",
        "image": require("../public/images/test.jpg")
    }
]

How to get an image link from a JSON to render in a react app

You can use an img tag to render user avatar,

 <td>
  <img src={user.avatar} />
 </td>

React, load images local from json

Compiled code will look into /public to find your images. You should move your assets to /public instead of src. (manually or by bundle tool)

Also, image source should be src={`${image.url}`}

https://codesandbox.io/embed/elastic-solomon-1ul1o

Issue trying to load image from json path in CRA app

You need default from result returned by require().

This is usually handled for you when import statement is used instead of require()

import React from "react";
import { Grid, Header, Image, Segment } from "semantic-ui-react";
import { getHomePageInfo } from "utils/dataClient";

export const HomeTitle = () => {
  let homepageinfo = getHomePageInfo();
  let imageUrl;
  try {
    const res = require("assets/image/" + homepageinfo.hero_portrait);
    console.log(res);
    imageUrl = res.default;
  } catch () {
    imageUrl = ''; // file not found
  }

  return (
    <Grid columns={2}>
      ...
      <Grid.Column
        only="tablet computer"
        verticalAlign="bottom"
        textAlign="right"
      >
        <Image as="img"
          className="img_portrait"
          spaced={"left"}
          src={imageUrl}
        />
      </Grid.Column>
    </Grid>
  );
};

UPDATED
require() may fail if the file is not found.

So I'd recommend using import as documentation suggests like this:

homepageinfo.ts:

import testImg from './assets/image/testimg.jpg';

export const homepageinfo: homepageinfoType = {
  ...
  hero_portrait: testImg,
};

This way all images will be resolved to paths during build time and homepageinfo.hero_portrait will contain the resulting URL

broken logo image when importing from json file in React App

If you are using create-react-app you will want to put static assets such as images (if you are not not ES6 importing images into the code) in the public folder. Try moving these images into the public folder created by create-react-app. You may also need to update the paths. Assuming your structure is:

public
  images
    photosnap.svg

You may need to change:

"logo": "./images/photosnap.svg",

to:

"logo": "/images/photosnap.svg",

Hopefully that helps!

how to put images from JSON file to React Native Js page

Be sure that your image's name is correct in your json file. For instance, .png instead .PNG, and then you need something like this:

Firstly create a component to load your icons:

c:\MobileApplication\test\Modules\Icons.js
exports.CAC = require('../assets/images/CAC.png');
exports.CAD = require('../assets/images/CAD.png');
exports.CAE = require('../assets/images/CAE.png'); 

Secondly import your Icons inside your component:

c:\MobileApplication\test\Modules\ServiceListDetails.js
import Icons from './Icons';
import resources from './ServiceDetails.json';

Finally:

  <Image source={Icons[resources.image]} style = {styles.imageView}/>

Now you have to change o json with the code you want.

    "image": "CAC"
}

Or

   "image": "CAD"
}

Or

 "image": "CAE"
}

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

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.

Import image string from JSON Data in Image component in React Native

If you are using local images then you need to add require function to load the images when you are going to display by url then you need to add uri

You can add local images with require function in your Data Array like this

const data= [
 {
 title: 'Lorem ipsum dolor sit amet.',
 price: '$1.99',
 image: require(../assets/img/item01.jpg),
 },
 {
 title: 'Lorem ipsum dolor sit amet.',
 price: '$1.99',
 image: require(../assets/img/item01.jpg),
 },
]

and in your image view just need to call it like this

<Image
 source={data.image}
 resizeMode='contain'
 style={{ width: null, height: null, flex: 1 }}
/>

and if you are not able to achieve so you can also export the images like this and add in your Data array

export const first_img = require('../assets/img/item01.jpg');
export const second_img = require('../assets/img/item01.jpg');


const data= [
 {
 title: 'Lorem ipsum dolor sit amet.',
 price: '$1.99',
 image: first_img,
 }
]

and you can call it in a same way

---

Related Topics