Пытаюсь получить изображение REACT.

Question

Я использую сценарий js для хранения информации для вставки в портфолио REACT. У меня есть файл с именем info.js, и раздел здесь выглядит как

let info = { portfolio: [
      {
         name: "this app",
         description: "this app does this",
         imgurl: "images/this_app.jpg",
         url: "https://urlhere.com"
     }]
 }

У меня есть изображения в папке src/images/. Я могу получить имя приложения, описание и тег a для рендеринга, но не могу отобразить изображение. Вот что у меня есть в моем js скрипте

export default class Portfolio extends Component { 
   render () {
     let Info = this.props.info;
     return (
        <div>
           {Info.portfolio && Info.portfolio.map((item) => {
              return (
                <div>
                    <img src={`${item.imgurl}`} alt="" />
                    <a href=`${item.url}`}>
                    <h5> {`${item.name}`}</h5>
                    </a>
                    <p>{item.description}</p>
                </div>
             );
          })};
      );
   }
}

Поэтому я думаю, что imgurl в массиве портфолио неверно, но я не уверен, как связать это там для каждого изображения.

Answer 1

В React вам нужно импортировать изображение в файл, в котором оно отображается. Итак, чтобы использовать изображение, вам нужно будет использовать

import image from ./image.png

, а затем вы можете визуализировать его, например,

<img src={image}/>

Официальная документация здесь

https://create-react-app.dev/docs/adding-images-fonts-and-files/

Answer 2

Файлы

Stati c должны находиться в папке public, а не в src, и другое дело, что URL-адрес должен начинаться с /, как это. /images/this_app.jpg".

Итак, переместите папку images в public и исправьте URL-адрес.