vue中引入图片的方法示例
作者：蔚蓝色的风暴
在我们写vue项目中肯定会用到各种图片,那么如何更好的使用图片资源呢?下面这篇文章主要给大家介绍了关于vue中引入图片的方法,需要的朋友可以参考下
一、图片放在/public目录下
<!-- img标签引入图片：图片名称，这种属于相对路径，在index.html的同级目录下查找此图片 -->
<img src="login-bg.png">
<!-- img标签引入图片：'/' + 图片名称，这种属于绝对路径，/表示编译后的dist文件夹 -->
<img src="/login-bg.png">
<!-- style样式引入图片时，需要用url来处理图片路径，url内部写法和img的src相同 -->
<div style="background-image: url('login-bg.png');"></div>
<div style="background-image: url('/login-bg.png');"></div>二、图片在/src/assets目录下
此时需要使用相对路径来引用
我们先看一下@是否配置为了src目录，查看vue.config.js
configureWebpack: {
resolve: {
alias: {
'@': resolve('src'),
},
}
}方法1：在vue中设置一个变量来引入
data () {
img: require('@/assets/images/img.jpg')
}然后直接在img中使用
<img :src="img">
方法2：在css样式中引用
<div class="img-class"></div>
<style scoped>
.img-class {
background-image: url('~@/assets/img/img.png')
}
</style>总结
到此这篇关于vue中引入图片的文章就介绍到这了,更多相关vue引入图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！