react項目中關於img標簽的src屬性的使用

　　在一個html文件中，img的src屬性賦值為相對路徑或絕對路徑的字符串即可訪問到圖片。如下：

<img src="../images/photo.png"/>

　　但在jsx文件中，不支持直接在標簽內寫圖片的路徑，可以使用如下兩種方法引入圖片：

1，import 方法

import imgURL from './../images/photo.png';
<img src={imgURL } />

2，require 方法

<img src={require('./../images/photo.png')} />

當需要實現動態加載圖片時，我們往往會在require中引入一個變量，

const iconUrl = "~/shared/assets/image/icon-document-tip-108-108.png"
<img className="icon" src={iconUrl} alt="" />

但是上面這種寫法是錯誤的，require中不能直接賦值一個變量，會加載不到圖片的，解決辦法可類似如下：

另外，還有一種解決辦法如下：提前require好賦值給變量，再將變量賦值給src

const iconUrl = require('~/shared/assets/image/icon-document-tip-108-108.png')
<img className="icon" src={iconUrl} alt="" />

 

推薦閱讀：https://www.cnblogs.com/Leo_wl/p/4862714.html