jsx中img标签的src属性的使用

 项目中, 遇到了img图片不显示的问题, 看了下以前的老代码, 发现是使用了设置HTML的img标签的方式设置了jsx中的img标签, 导致没生效, 所以记录一下踩坑记录。

先来看一下HTML中img标签的设置:

1). 相对路径

2). 绝对路径

网络上的图片:
<img src="https://publish-pic-cpu.baidu.com/f6c87c36-99a7-4493-9615-a5c11f21ae60.png@h_152|c_1,w_228" \>
本地图片:
<img src="file:///D:/photo/二次元/10.jpg" width="1000" height="500" />

但在jsx文件中，不支持直接在标签内写图片的路径，可以使用如下两种方法引入图片：

1). import 方法: (项目中使用了此种方式)

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

2). require方法: (使用require, require里面只能是字符串不能是变量)

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

或者提前require好赋值给变量, 再将变量赋值给src

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

此外, 如果需要实现动态加载图片时，我们往往会在require中引入一个变量, 像这样:

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

但是上面这种写法是错误的，require中不能直接赋值一个变量，会加载不到图片的，解决办法可类似如下：

设置图片变量:
let dynamicPath = 'centerPath/window';
let imgSrc = require('../../' + dynamicPath + '.js');
<img src={imgSrc} />

动态require解读:
require(path), path至少要有三部分组成
../../         => webpack在打包时知道从哪里开始查找
dynamicPath    => 文件路径+名称
.js            => 文件后缀, 必须要加上, 不然会报错

参考: react项目中关于img标签的src属性的使用 - 贝子涵夕 - 博客园