React-Native: упаковщик не обнаруживает изображения

Question

Я не могу понять, как программно добавлять изображения в React-Native. У меня есть каталог, /img, полный изображений и файл JSON, data.json полный записей данных, которые имеют соответствующие и пути к файлам изображений:

[
 {
  "id": "1",
  "img": "img1.png"
 },
 {
  "id": "2",
  "img": "img2.png"
 }
]

Я загрузил data.json в переменную с var data = require('data.json')и я могу получить доступ к путям изображения обычно через data[0].img, Также я могу создать Image теги, которые отображают изображения через <Image source={{uri = "./img/img1.png"}} style={styles.img}/>,

Тем не менее, когда я пытаюсь объединить два, с <Image source={{uri = "./img/" + data[0].img}} style={styles.img}/>, Я получаю эту ошибку: Требуется неизвестный модуль "./img/img1.png". Если вы уверены, что модуль есть, попробуйте перезапустить упаковщик.

Я перезагружал свой симулятор несколько раз, искал здесь и часами документацию, чтобы выяснить, что я делаю неправильно. Любая помощь будет принята с благодарностью.

Answer 1

В вашем коде есть две "ошибки": ключ объекта не назначен = но с :, И вы не можете комбинировать строки в этом случае, так как AFAIK, в конечном итоге используется require() для изображений, и он не принимает ничего, кроме простых строк.

Я бы посоветовал вам сделать это так:

const assets = {
  img1: './img'+ data[0].img
}

...

<Image source={{uri: assets.img1} style={styles.img}/>

Answer 2

Вы не можете показывать локальные изображения таким образом.

Что вы можете сделать, это следующее:

[
 {
  "id": "1",
  "img": require("./img/img1.png")
 },
 {
  "id": "2",
  "img": require("./img/img2.png")
 }
]

затем <Image source={data[0].img} style={styles.img} />