img标签src问题

Question

我无法在React应用中使用img标签。

我的文件结构如下：

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

我在views / Home / index.js中有一个<img>标签

我使用的特定行是：

<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"/>