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