vue如何通过src引用assets中的图片
更新时间：2022年03月26日 11:36:55 作者：maidu_xbd
这篇文章主要介绍了vue如何通过src引用assets中的图片，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue:src引用assets的图片
导入图片并在data中声明
<script>
import backImg from "../../assets/images/backimg.jpg";
export default {
data() {
return {
backImg: backImg,
};
}
</script>使用
<img :src="backImg" />
vue引入图片方式
对于静态的img,正常引入即可
<img src="@/assets/img/login/user.png"> // 可以使用@
当使用模板绑定src时
// 不可以使用@，无法解析；也无法找到assets目录 <img :src="@/assets/img/login/user.png">
方式1：
// 将图片放到static目录下 <img :src="'../../static/img/login/user.png'">
方法2：
在data中require()进来：
// html
<img :src="img">
// data
img: require('@/assets/img/login/user.png')方法3：import进来
// html <img :src="img"> // script import img from '@/assets/img/login/user.png' // data img: img
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue做移动端适配最佳解决方案(亲测有效)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了Vue.extend 登录注册模态框的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
这篇文章主要介绍了vue如何在store仓库中使用路由，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
Vue报错Module build failed: Error: Node&nb
这篇文章主要介绍了Vue报错Module build failed: Error: Node Sass version 7.0.1 is incompatible with 4.0.0.解决方案,需要的朋友可以参考下2023-06-06
Vue3+TS项目中eslint、prettier安装配置详细指南
为了更好的统一项目的代码风格,因此在编写时就可以使用eslint+prettier,它们不仅能方便代码编写,还能避免不必要的错误,让代码变得更加严谨,这篇文章主要给大家介绍了关于Vue3+TS项目中eslint、prettier安装配置的相关资料,需要的朋友可以参考下2024-07-07
本文详细介绍了Vue中nextTick的原理和使用方法,Vue采用异步渲染机制,通过nextTick可以确保在DOM更新后执行回调,nextTick依赖微任务和宏任务,优先使用Promise,降级到MutationObserver/setTimeout,Vue3进一步优化了nextTick,减少了复杂度并提升了性能2025-02-02
vue-cli 是 Vue.js 开发的标准工具,它简化了程序员基于 webpack 创建工程化的 Vue 项目的过程,下面这篇文章主要给大家介绍了关于Vue命令行工具Vue-CLI的相关资料,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了vue中 v-for循环的用法详解,本文通过实例代码的形式给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-02-02
keep-alive是Vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁，这篇文章主要介绍了详解Vue中keep-alive的使用,需要的朋友可以参考下2023-03-03
过滤器的功能是对要显示的数据进行格式化后再显示,其并没有改变原本的数据,只是产生新的对应的数据,下面这篇文章主要给大家介绍了关于Vue中过滤器定义以及使用方法的相关资料,需要的朋友可以参考下2022-12-12
最新评论