React如何请求本地图片资源?

1,039 阅读1分钟

react.js请求本地图片的几种方式:

1. 使用import引入该图片

    import testImg from './assest/img.png';
    <img src={testImg} />

2.使用require引入图片

  • 注意,require('./asstst.img.png')这种方式引入只能使用路径地址不可以使用变量引入

比如在循环遍历图片的时候,假设一个数组;

image.png

image.png

image.png

  • 我们会看到页面上经常会报这种错,很多时候新手可能会误以为是代码路径的问题,试了很多次路径正确,但是该文件依然找不到,于是在这个问题上面纠结很长时间,找不到解决办法;

  • 此时如果我们使用拼接字符串的形式,就不会出现这种错误;

image.png

image.png

  • 如此这样,问题就得到了解决

另外的一种情况就是后端数据直接返回图片的绝对路径地址,前端直接进行循环遍历就可以,无需考虑导入本地图片的路径问题

... 极速更新中,敬请关注