2022-05-23 工作记录--React-jsx中引入图片

React-jsx中引入图片

在React-jsx中引入图片时，不能🙅🏻‍♀️像HTML那样直接引入图片地址，比如：

• <img src="../../assets/我的奖品/empty.png" alt="" />

一、方法一

❀先用import引入图片资源，再将其赋值给img的src属性，比如：

import myImg from '../../assets/我的奖品/empty.png';

<img src={myImg} alt="" />

二、方法二

❀使用require，写法有二，请往下看👇🏻

【注意：若通过此方法获取到的src是[object Module]，则需要在导入的图片资源后面要加.default。（非强制添加，case by case）】

写法1、

通过require直接给img的src属性引入图片资源，比如：

<img src={require('../../assets/我的奖品/empty.png').default} alt="" />

写法2、

先用require引入图片资源，再将其赋值给img的src属性，比如：

const myImg = require('../../assets/我的奖品/empty.png');

<img src={myImg.default} alt="" />