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引入图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

浅谈vue+webpack项目调试方法步骤
本篇文章主要介绍了浅谈vue+webpack项目调试方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
vue如何使用文件流进行下载(new Blob)
这篇文章主要介绍了vue如何使用文件流进行下载(new Blob)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
vue操作dom并为dom增加点击事件方式
这篇文章主要介绍了vue操作dom并为dom增加点击事件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-04-04
vue3响应式转换常用API操作示例代码
在Vue 3中,响应式系统得到了显著改善,包括使用Composition API时更加灵活的状态管理,这篇文章主要介绍了vue3响应式转换常用API操作示例代码,需要的朋友可以参考下
2024-08-08
Electron-store本地存储功能用法详解
这篇文章主要为大家介绍了Electron-store本地存储功能的用法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
这篇文章主要介绍了Vue组件模板形式实现对象数组数据循环为树形结构,本文用vue实现方式，非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-07-07
Vue项目配置在局域网下访问方式
这篇文章主要介绍了Vue项目配置在局域网下访问方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
vuex中...mapstate和...mapgetters的区别及说明
这篇文章主要介绍了vuex中...mapstate和...mapgetters的区别及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
Vue.js结合bootstrap实现分页控件
这篇文章主要为大家详细介绍了Vue.js 合bootstrap实现分页控件的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
通过Element ui往页面上加一个分页导航条的方法
这篇文章主要介绍了通过Element ui往页面上加一个分页导航条的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-05-05