vue中引入图片的方法示例
更新时间：2023年06月19日 15:56:23 作者：蔚蓝色的风暴
在我们写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引入图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要介绍了element实现二级菜单和顶部导航联动的示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
这篇文章主要介绍了浅谈Vue数据响应，Vue的数据响应主要是依赖了Object.defineProperty()，下面就具体来介绍一下如何实现数据响应2018-11-11
这篇文章主要介绍了浅谈Vue项目骨架屏注入实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
最近被问起是否了解vue的插槽（slot），咋一想发现，似乎很少用到这玩意。所以整理了下slot的一些用法2022-08-08
这篇文章主要介绍了Ant Design Vue Table组件合并单元格方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了Vue3之组件状态保持KeepAlive的简单使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
这篇文章主要介绍了vue-cli 配置资源引用的绝对路径的问题，本文通过图文实例相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-09-09
vue源码学习之Object.defineProperty对象属性监听
这篇文章主要介绍了vue源码学习之Object.defineProperty对象属性监听，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要介绍了vue路由守卫+登录态管理,结合实例形式分析了vue路由守卫与登录态管理相关操作步骤与实现技巧,需要的朋友可以参考下2019-05-05
Vue.js 核心特性之一就是双向绑定,本文将深入探讨 Vue2 和 Vue3 在双向绑定上的区别,并分析这些改进对性能和开发体验的影响,希望对大家有所帮助2024-11-11
最新评论