Как загрузить изображение в ответ (модуль ошибки не найден)?

Я пытаюсь показать несколько изображений с помощью функции map, но получаю эту ошибку

Не удается найти модуль '../../assets/images/logo-full.png'

Код, который работает, отлично работает в методе рендеринга

{[require('../../assets/images/logo-full.png')].map((i)=><img key = {i} src = {i}></img>)}

Код, который не работает в методе рендеринга и получает ошибку выше, и почему ??

{['../../assets/images/logo-full.png'].map((i)=><img key = {i} src = {require(i)}></img>)}

почему require нужен элемент массива, а не src? Как загрузить изображение в ответ (модуль ошибки не найден)?

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

duc mai 28.03.2019 00:22
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
1
597
2

Ответы 2

Вы не можете передать переменную для требования. Это нужно знать во время компиляции, чтобы требовать для работы. Это объясняется в документах. https://facebook.github.io/react-native/docs/images

Как вы упомянули, изображения находятся в массиве, и вам нужно визуализировать изображения, запустив карту в вашем массиве. Таким образом, путь к изображению также должен присутствовать в массиве.

constructor(props){
    super(props);
    this.state = {
        imageArr:[{'id':1,source:'pathofimage1'},{'id':2,source:'pathofimage2'}]
    }
}


render(){
    return (
        <div>
            {this.state.imageArr.map((item,index)=>{
                 return (
                     <div key = {index}>
                     <img src = {item.source} alt = "image" />
                     </div>
                 )
            })
        </div>
    )
}

Другие вопросы по теме