学习笔记230801--vue项目图片绝对路径和相对路径引入编译加载问题

@德玛玩前端2023-08-20 14:12

问题描述：

在组件中引入图片出现了问题,<img>标签的src属性，动态绑定import引入的绝对路径图片或者直接在src静态引入图片绝对路径都可以在页面渲染出来，在浏览器可以看到路径都转成了dataUrl，但是动态绑定图片的绝对路径却无法转换，页面也渲染不出。

代码展示

javascript 复制代码

// 方案1
<img src="~@/assets/images/createApp.png"/>  //可以展示

// 方案2
import createAppUrl from '@/assets/images/createApp.png'
<img :src="createAppUrl"/>   // 可以展示
data(){
    return{
        createAppUrl
    }
}

// 方案3
<img :src="createAppUrl"/>  // 动态加载不行

data(){
    return{
        createAppUrl:'~@/assets/images/createApp.png'
    }
}

解决方法

动态加载时使用requrie()引入相对路径就可以解决这个问题

复制代码

    <img :src="createAppUrl"/>  
    data(){
        return{
            createAppUrl:require('../../assets/images/createApp.png')
        }
    }