Img tag src проблемы

Question

У меня проблемы с использованием тега img в приложении реагирования.

Моя файловая структура выглядит так:

Project
 |    
 +-- assets
 |  |  
 |  \-- pic.png
 |    
 +-- views
 |  |  
 |  |-- Home
 |     |
 |     |-- index.js
 |     \-- index.css

У меня есть тег <img> в представлениях / Home / index.js

конкретная строка, которую я использую:

<img src="../../assets/pic.png" alt="pic"/>

Но он говорит, что не может найти файл. Однако, если я использую <div> вместо тега <img> и использую css, чтобы получить файл от views / Home / index.css:

.pic-container {
  background-image: url("../../assets/pic.png");
}

<div className="pic-container"/>

Работает нормально.

Что здесь происходит?

Answer 1

В React вам обычно нужно либо запрашивать изображение, либо импортировать его в ваш компонент.

<img src={ require("../../assets/pic.png") } alt="pic"/>

Или ..

import pic from "../../assets/pic.png"
...
<img src={pic} alt="pic"/>