工作中遇到的小问题,恶心了我很久,记录下来防止还有人踩坑。

v-html可以把html语言直接渲染出来,但其中带来一部分问题,html中的图片路径(即<img src="xxx">)如果要进行替换修改,该怎么做?

问题的重点在于,图片(或者说资源信息,包括文件啥的)的存储位置怎么表示?实测Vue中在这一块是不能进行绝对路径表示的,只能用相对路径

在Vue2里,图片放在static里,也就说你要改造项目,记得把图片文件夹放在static里。

在Vue3里,没有static了,图片文件夹就放在public下。

坑点来了!在写路径的时候,如果是图片路径,则不需要写出“public”

啥意思呢,举个例子:

    

<img src=\"../../public/img/1.png\" alt=\"\">

   一般这么写,代表的是当前的vue文件所在的位置,返回上一层目录,再返回上一层目录,然后在这层目录中选择public文件夹,选择里面的1.png。

   遗憾的是,这么写的话,你的图片压根显示不了,这是错误的路径写法。

   应改成

 <img src=\"../../img/1.png\" alt=\"\">

  这么写,表达的才是“当前的vue文件所在的位置,返回上一层目录,再返回上一层目录,然后在这层目录中选择public文件夹,选择里面的1.png”   

public不需要写出来!说实话,我没有搞懂这个简化有啥意义,而且还贼容易引起歧义...


更新于2022/04/16,实测,哪怕是非图片文件夹也不需要写public,反正不管怎么造,public就是得省略!!!

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐