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="http://www.jb51.net/article/119782.htm/../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 实现图片本地预览 裁剪 压缩 上传功能

    vue.js 实现图片本地预览 裁剪 压缩 上传功能

    这篇文章主要介绍了vue.js 实现图片本地预览裁剪压缩上传功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-03-03
  • 详解vue slot插槽的使用方法

    详解vue slot插槽的使用方法

    本篇文章主要介绍了详解vue slot插槽的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • VueJS事件处理器v-on的使用方法

    VueJS事件处理器v-on的使用方法

    本篇文章主要介绍了VueJS事件处理器v-on的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • vuex的module模块用法示例

    vuex的module模块用法示例

    这篇文章主要介绍了vuex的module模块用法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • vue项目打包之后背景样式丢失的解决方案

    vue项目打包之后背景样式丢失的解决方案

    今天小编就为大家分享一篇关于vue项目打包之后背景样式丢失的解决方案,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • 解决vue+webpack打包路径的问题

    解决vue+webpack打包路径的问题

    下面小编就为大家分享一篇解决vue+webpack打包路径的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue页面骨架屏的实现方法

    Vue页面骨架屏的实现方法

    在开发webapp的时候总是会受到首屏加载时间过长的影响,越来越多的APP采用了“骨架屏”的方式去提升用户体验。这篇文章主要介绍了Vue页面骨架屏的实现方法,感兴趣的小伙伴们可以参考一下
    2018-05-05
  • vue-hook-form使用详解

    vue-hook-form使用详解

    这篇文章主要为大家详细介绍了vue-hook-form的使用方法,以及如何安装vue-hook-form,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • vue 1.0 结合animate.css定义动画效果

    vue 1.0 结合animate.css定义动画效果

    本文分步骤给大家介绍了Vue 1.0自定义动画效果,vue1.0代码结合animate.css定义动画,页面一定要引入animate.cdd,具体实例代码大家参考下本文
    2018-07-07
  • 详解关于vue2.0工程发布上线操作步骤

    详解关于vue2.0工程发布上线操作步骤

    这篇文章主要介绍了详解关于vue2.0工程发布上线操作步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09

最新评论