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 cli使用绝对路径引用图片问题的解决
  • 关于vue背景图打包之后访问路径错误问题的解决
  • vue-cli中打包图片路径错误的解决方法
  • 关于vue.js发布后路径引用的问题解决
  • vue 去除路径中的#号
  • vue.js 实现图片本地预览 裁剪 压缩 上传功能
  • 详解vue slot插槽的使用方法
  • vuejs事件处理器v-on的使用方法
  • vuex的module模块用法示例
  • vue项目打包之后背景样式丢失的解决方案
  • 解决vue+webpack打包路径的问题
  • vue页面骨架屏的实现方法
  • vue-hook-form使用详解
  • vue 1.0 结合animate.css定义动画效果
  • 详解关于vue2.0工程发布上线操作步骤
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved