How to import data images from json file

Question

I'm using expo react-native. I want to store all my images in one file and from there import it to my components when I need, I just don't know how to write it.

Right now I used in Clumsy and complicated and unreadable way like this:

Constant file "Images" to hold all the pictures:

     export const t1 = require("../assets/images/t1.jpg");
     export const t2 = require("../assets/images/t2.jpg");
     export const t3 = require("../assets/images/t3.jpg");
     export const t4 = require("../assets/images/t4.jpg");
     export const s1 = require("../assets/images/s1.jpg");
     export const s2 = require("../assets/images/s2.jpg");
     export const s3 = require("../assets/images/s3.jpg");
     export const s4 = require("../assets/images/s4.jpg");
     export const r1 = require("../assets/images/r1.jpg");

and from each component that i need the images I just import it:

   import { t1, t2, t3, t4 } from "./Images";
    ...
    <Image source={t1} ..........

It works great, but I want to know how to save the constant images in json file I understand that is more efficient way to hold the images

Thanks a lot

See my [answer](https://stackoverflow.com/questions/65354887/rendering-local-images-from-database/65356580#65356580). — Leri Gogsadze, Dec 21 '20 at 10:15
Its not what im asked for. I just need to declare constant json file with all my images — Roei Grinshpan, Dec 21 '20 at 10:39

score 0 · Answer 1 · answered Dec 21 '20 at 10:51

I think you want a variable that holds all your img like this

  const t1 = require("../assets/images/t1.jpg");
  const t2 = require("../assets/images/t2.jpg");
  const t3 = require("../assets/images/t3.jpg");
  const t4 = require("../assets/images/t4.jpg");
  const s1 = require("../assets/images/s1.jpg");
  const s2 = require("../assets/images/s2.jpg");
  const s3 = require("../assets/images/s3.jpg");
  const s4 = require("../assets/images/s4.jpg");
  const r1 = require("../assets/images/r1.jpg");

  export = {t1, t2, t3, t4, s1,s2,s3,s4,r1};

so you can import it like this

import img from "./Images";

<Image source={img.t1} ..........

is that what you want buddy?

score 0 · Answer 2 · answered Dec 21 '20 at 11:33

0

try to import image like this

import t1 from '../assets/images/t1.jpg'
import t2 from '../assets/images/t2.jpg'

answered Dec 21 '20 at 11:33

Nikhil bhatia

1,297
1
8
9

How to import data images from json file

2 Answers2