Vue3中引用本地图片路径的方法详解
作者：程序员大澈
这篇文章主要为大家详细介绍了Vue3中引用本地图片路径的常用方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
今天做Vue3项目，在引用本地图片路径这块时，突然大脑就有点短路了。
在使用el-image组件加载本地图片时，总是提示Failed，图片显示不出来。
使用require当然也无济于事，因为我的项目脚手架用的是Vite。
于是，有了今天对在Vue3中引用本地图片路径，这个功能问题解决的整理，希望能帮到和我一样大脑突然短路的朋友们哈。
两种情况引用实现
1、在模版中使用
首先要注意这里使用的是img元素，不是el-image等图片UI组件。此时使用相对路径或绝对路径都可以。
<template>
<img style="width: 100px; height: 100px" src="@/assets/01.png" />
</template>
在Vite脚手架搭建的项目中，下面几种情况都是不行滴，只能使用下面我们说的在逻辑中使用的方法！
<el-image :src="require('@/assets/2.png')" /> //X
<el-image :src="require('../assets/2.png')" /> //X
<el-image src="@/assets/2.png" /> //X
<el-image src="../assets/2.png" /> //X
在Vue-cli脚手架搭建的项目中，必须要带有require，直接使用相对路径或绝对路径引用是不行滴！
<el-image :src="require('@/assets/2.png')" /> //√
<el-image :src="require('../assets/2.png')" /> //√
<el-image src="@/assets/2.png" /> //X
<el-image src="../assets/2.png" /> //X
2、在逻辑中使用
掌握这种Vue3常规用法基本就OK了。
<template>
<el-image style="width: 100px; height: 100px" :src="accIcon" />
</template>
<script setup>
import accIcon from "@/assets/01.png"
</script>
如果你是Vue2项目，无论是在逻辑还是模版中，都用require就OK了。
知识补充
除了上文的方法，小编还为大家整理了vue导入及使用本地图片的常用方法，希望对大家有所帮助
1.直接使用
<template> <img src="./image/1.jpg"/> </tempalte>
2.data里使用require
<template>
<img :src="imgUrl">
</template>
<script>
export default {
data() {
return {
imgUrl:require('./image/1.jpg')
}
}
}
</script>
3.data使用import进来
<template>
<img :src="imgUrl">
</template>
<script>
import img from './image/1.jpg'
export default {
data() {
return {
imgUrl:img
}
}
}
</script>
4.使用生命周期
<template>
<img :src="imgUrl">
</template>
<script>
export default {
data() {
return {
imgUrl:''
}
},
created() {
let urlImg = "pages/MSite/image/1.jpg"
this.imgUrl = require("@/"+urlImg)
}
}
</script>到此这篇关于Vue3中引用本地图片路径的方法详解的文章就介绍到这了,更多相关Vue3引用本地图片路径内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！