如何從 json 文件導入數據圖像

Question

我正在使用 expo react-native。 我想將所有圖像存儲在一個文件中，並在需要時從那里將其導入到我的組件中，我只是不知道如何編寫它。

現在我以這樣的笨拙和復雜且不可讀的方式使用：

保存所有圖片的常量文件“Images”：

     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");

並從我需要圖像的每個組件中導入它：

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

它工作得很好，但我想知道如何將常量圖像保存在 json 文件中我知道這是保存圖像的更有效方法

非常感謝

Answer 1

我想你想要一個像這樣保存你所有 img 的變量

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

所以你可以像這樣導入它

import img from "./Images";

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

那是你想要的嗎？

Answer 2

嘗試像這樣導入圖像

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