Блог

Это мой первый пост, поэтому приношу извинения, если отсутствует какая-либо важная информация.

Я создаю веб — страницу с помощью react. Я пытаюсь заполнить страницу на своей веб-странице, сопоставив ее с относительно простым файлом JSON.

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

До сих пор я пытался устранить неполадки, поместив URL-адрес изображения из Интернета в JSON, который отлично работает.

Вот мой код реакции:

 {Services.map((item) =gt; {  return (  lt;Fragmentgt;  lt;li className="services-item"gt;  lt;img  src={item.image}  className="services-item-img"  /gt;  lt;div className="services-item-text"gt;  lt;div className="h1"gt;{item.title}lt;/divgt;   lt;div className="p1"gt;{item.paragraph}lt;/divgt;  lt;/divgt;  lt;/ligt;   lt;div className="diamonds-container"gt;  lt;img src={Diamonds} className="diamonds" /gt;  lt;/divgt;  lt;/Fragmentgt;  );  })}  

а вот мой файл JSON:

 [  {  "title": "DESIGN amp; WEB",  "paragraph": "Brand consistancy and agility are important, which is why we do it all in one place. We want to make this complex task as simple as possible for everyone we work with.",  "image": "../images/pen.svg"  },  {  "title": "MOTION DESIGN",  "paragraph": "Our talent pool has a long history in the motion design world. From creating graphics for New Zealand's largest broadcast outlets, to animating content for hugely succesful YouTube channels across the globe.",  "image": "../images/keyframe.svg"  },  {  "title": "PHOTO amp; VIDEO",  "paragraph": "Photography, film and video is a long term passion of ours. Every photography or video project that we have been a part of, takes with it a part of our heart and soul.",  "image": "../images/video.svg"  } ]  

Вот скриншот моей структуры папок тоже, если это полезно: Структура папок Проекта:

Спасибо!

поместите папку с изображением в public папку и отредактируйте свойство изображения следующим образом "./images/video.svg"

Почему эта работа

Потому что в браузере это public/index.html файл, который отображается, поэтому вам нужно добавить ресурсы изображений относительно общей папки