react导入图片方式 + webpack 绕坑

1.必须写在行内

2.导入本地分为require 和 import

推荐使用require

require能得到正确的地址 imgs/Pikachu.0cf77408.jpg

import拿到的是base64地址，视觉太难受

<div style={{width:300,height:300,backgroundImage:'url(https://lc-gold-cdn.xitu.io/026ef8bcb88e6b1770d6.png?imageView2/0/w/1280/h/960/format/webp/ignore-error/1)'}}></div>

import img3 from '@/assets/images/Pikachu.jpg'

const img2 = require('../../../assets/images/Pikachu.jpg')

错误示范

webpack不对字符串进行解析，因为没有url()函数，只有到浏览器的时候解析css 会解析到url()，文件的hash码都没有，完全没走webpack

    <div style={{width:300,height:300,background:'url(../../../assets/images/arrow.png)'}}></div>

也就是说在行内写字符串的url,webpack不会解析，是什么样就访问什么，只会解析css里面的url()函数

之前出了个小状况 css 里的 url()先经过css loader 处理 再经过 url loader 处理，

地址变成了 /css/imgs

是因为url-loader配置的路径是 imgs/…

等价于 ./imgs/… 是相对路径

在css里面读出来的自然相对于css 于是 /css/imgs形成了

差别就在这里