el-image的一系列坑

发布时间 2023-07-25 16:42:59作者: Delusional_man

今天做自己博客的时候,想试试elment-plus的image组件,结果不用不知道,一用吓一跳

 

坑1:无法加载相对路径

向el-image的src里写入"../../myGift/LoveLetter/assets/images/a.png",结果发现请求错误,而用原生img可以正常显示

正确请求是:

 http://localhost:5173/src/myGift/LoveLetter/assets/images/a.png 

错误请求是:

 http://localhost:5173/myGift/LoveLetter/assets/images/a.png 

少了个src有木有搞错啊!!!(诶,好像之前用组件的时候也遇到过类似问题,但不记得了,如果以后想起再更新)

转头向度娘寻求解决方案,于是有了第二个坑

 

坑2:vite中使用require报错

网上说只要动态给src里面的路径套用一个require就行了,结果一用就报错:require is not defined

再查,原来是vite的问题。因为 require 是属于 Webpack 的方法,所以使用vite构建的Vue3项目无法使用require解析静态资源

vite中,使用 new URL(`../assets/home/${url}`, import.meta.url).href 获取url,但是我用了是这样的:

 我特么的真的快裂开了555

 

曙光:解决方案

猜猜怎么解决的,使用 src/myGift/LoveLetter/assets/images/a.png 

也不知道什么原理,反正看了缺啥补啥(