Vue.js中的图片引用路径的方式
更新时间：2017年07月28日 09:15:00 作者：卜小娴
当我们在Vue.js项目中引用图片时，关于图片路径有以下几种情形,下面通过本文给大家分享Vue.js中的图片引用路径的方式，感兴趣的朋友一起看看吧
当我们在Vue.js项目中引用图片时，关于图片路径有以下几种情形：
使用一
我们在data里面定义好图片路径
imgUrl:'../assets/logo.png'
然后，在template模板里面
/*错误写法*/
<img src="{{imgUrl}}">
这样是错误的写法，我们应该用v-bind绑定图片的srcs属性
<img :src="imgUrl">
或者
<img src="../assets/logo.png">
这种方式是按照正常HTML语法引用路径，放在模板里可以被webpack打包出来。
使用二
当我们需要在js代码里面写图片路径的时候，如果我们在data里面写
/*错误写法*/ imgUrl:'../assets/logo.png'
此时webpack只会把它当做字符串处理从而找不到图片地址，此时我们可以使用import引入图片路径：
<img :src="avatar" /> import avatar from '@/assets/logo.png'
在data里面定义
avatar: avatar
情形三
我们也可以把图片放在外层的static文件夹里面，然后在data里面定义：
imgUrl ： '../../static/logo.png' <img :src="imgUrl" />
总结
以上所述是小编给大家介绍的Vue.js中的图片引用路径的方式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了Vue.js slot插槽的作用域插槽用法详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
因为近日在学习并使用VUE,客户有一个要求,要输入框可模糊查询并带有下拉提示的应用,数据从接口取,下面这篇文章主要给大家介绍了关于Vue实现模糊查询filter()的相关资料,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了Vue Promise的axios请求封装详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
watch函数用于侦听某个值的变化,当该值发生改变后,触发对应的处理逻辑,本文将给大家介绍了Vue3中watch监听的五种情况,文中通过代码示例讲解的非常详细,具有一定的参考价值,需要的朋友可以参考下2024-03-03
vue3.0运行npm run dev报错Cannot find module&
本文主要介绍了vue3.0运行npm run dev报错Cannot find module node:url,因为使用的node版本是14.15.1低于15.0.0导致,具有一定的参考价值,感兴趣的可以了解一下2023-10-10
这篇文章主要介绍了vue如何获取图片流数据并展示问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-09-09
这篇文章主要为大家详细介绍了Vue3响应式核心之reactive的相关知识，文中的示例代码讲解详细，对我们学习Vue3有一定的帮助，需要的可以参考一下2023-04-04
Vue 提供了createElement 来创建虚拟dom，方便我们来函数化的方式来定义复杂的组件结构，这篇文章主要介绍了Vue 中 createElement 使用详解,需要的朋友可以参考下2022-10-10
大家都知道,vue是具有单向数据流的传递特性,下面这篇文章主要给大家介绍了关于Vue3中如何修改父组件传递到子组件中值的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-04-04
今天小编就为大家分享一篇Vue根据条件添加click事件的方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
最新评论