位置: IT常识 - 正文
vue中引入图片的方法(vue3引入图片)
编辑：rootadminvue中引入图片的方法 
本文链接地址:https://www.jiuchutong.com/zhishi/297359.html
转载请保留说明！
推荐整理分享vue中引入图片的方法(vue3引入图片)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue 引入图片 json,vue引入图片无法显示,vue3引入图片,vue引用图片路径,vue 引入图片 json,vue 引入图片 json,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>上一篇：Kicad学习笔记1:KLC:Kicad库公约（kicad liberary convertion）(kicad视频教程 百度网盘)
下一篇：Vue项目中实现ElementUI按需引入(vue在项目中怎么用的)
