Метод require () не работает с привязанными ссылками на эталонные изображения - React - PullRequest
Новая
       24

Метод require () не работает с привязанными ссылками на эталонные изображения - React

1 голос
/ 09 апреля 2020

У меня есть файл данных, который содержит массив со ссылками на локальные изображения. Когда я пытаюсь отобразить этот массив и отобразить список изображений, тогда метод require () позволяет мне указывать только имя файла изображения и путь доступа отдельно , как показано на изображении 1 кода ниже.

Изображение 2, ни изображение 3 не может работать, даже если источник изображения выглядит так же, как в примере с изображением 1.

Почему это работает так? Можно ли как-то обойти это? Я не хочу исправлять свой атрибут sr c каждый раз, когда мне нужно отобразить список изображений . Кроме того, получение изображений с помощью импорта не лучший способ, поскольку длина массива может быть огромной, а также может динамически меняться.

Спасибо за помощь и приветствия. 

   // news.image = 'news-img1.jpg',
   // news.imageSrc = '../images/news-img1.jpg'

const NewsList = ({ newsList }) => {
   const listItems = newsList.map((news) => {
      return (
         <li key={news.id}>
            <img src={require(`../images/${news.image}`)} alt={news.title} /> // image1
            <img src={require(`${news.imageSrc}`)} alt={news.titleSrc} /> // image2
            <img src={require(news.imageSrc)} alt={news.titleSrc} /> // image3
         </li>
      )
   })
   return (
      <section className="news-list">
         <ul>
            {listItems}
         </ul>
      </section>
   );
}

export default NewsList;

1 Ответ

1 голос
/ 09 апреля 2020

На вашем месте я бы не включал свои изображения в папку src проекта, а вместо этого помещал их, например, в папку public/images. Таким образом, операторы require не понадобятся, поскольку React будет копировать изображения напрямую, без каких-либо изменений в именах или путях.

Пример кода: 

   // news.image = 'news-img1.jpg',
   // news.imageSrc = '../images/news-img1.jpg'

const NewsList = ({ newsList }) => {
   const listItems = newsList.map((news) => {
      return (
         <li key={news.id}>
            <img src={`${process.env.PUBLIC_URL}/images/${news.image}`} alt={news.title} /> // image1
         </li>
      )
   })
   return (
      <section className="news-list">
         <ul>
            {listItems}
         </ul>
      </section>
   );
}

export default NewsList;
...