不得不说,对于水平只有jquery的vue初学者来说,vue的图片加载实现确实挺坑的,在文档中也没有看到说明。经过百度之后终于知道了什么情况。

首先:

这样是没问题的:

<img src="./../assets/avatar.png" />

但是我把地址提取出来,当道 data 里之后就不行了。

<img :src="logoSrc" >

export default {
data () {
return {
logoSrc: './../assets/avatar.png'
}
}
}

这样会报404错误。

  原因是如果你把相对地址写在模版里,就是第一种,用webpack打包的时候,会解析地址并打包引用图片。
而在 js 里写图片路径其实只是字符串 webpack 不会处理
如果想这么做 你可以把图片放在最外层的 static 文件夹里,当然我不推荐这种做法。
  还有一种方法就是通过 import require 引入图片。比如:
http://blog.csdn.net/fairyier/article/details/70847057

  还有一种情况。后端传递过来的图片是不需要 require 的。如果要显示,直接在 img 的 src 设置后端返回的地址即可。

用哪种方法就看实际情况吧,图片少的话用require是蛮不错的,如果多的话,是不是会很麻烦呢。

 
 
 
 
 
 
 

vue组件属性中字符串如何拼接变量?的更多相关文章

  1. Vue组件template模板字符串几种写法

    在定义Vue组件时,组件的模板template选项需要的是一个字符串,当其内容较复杂需要换行时,需要简单处理一下,具体有五种方式: 方式一:使用 \ 转义换行符 <!DOCTYPE html&g ...

  2. 在vue组件库中不能使用v-for

    没事的,有点时候编辑器报错,但运行不一定出错, 在vue组件中注意template标签

  3. R语言中字符串的拼接操作

    在R语言中 paste 是一个很有用的字符串处理函数,可以连接不同类型的变量及常量. 函数paste的一般使用格式为: paste(..., sep = " ", collapse ...

  4. vue 组件属性props,特性驼峰命名,连接线使用

    网址:https://www.cnblogs.com/alasq/p/6363160.html 总结如下:vue的组件的props属性支持驼峰命名,不支持连接线命名,使用是用连接线进行赋值或者数据绑定 ...

  5. js中字符串的拼接的另一种方法

    // 按一定长度截断字符串,并使用 + 运算符进行连接. // 分隔字符串尽量按语义进行,如不要在一个完整的名词中间断开. // 特别的,对于HTML片段的拼接,通过缩进,保持和HTML相同的结构. ...

  6. python中字符串的拼接

    1.+ 号 2.format() 3.f"{username}登录成功" 4.%s 5.列表中的 join 6.逗号 http://www.cnblogs.com/gengcx/p ...

  7. vue 组件 模板中根数据绑定需要指明路径并通信父

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>T ...

  8. vue动态绑定src加字符串拼接

    关键点 1.img中的src的字符串动态拼接 2.style中的background属性赋值 一.img中的src的字符串动态拼接 1.问题是这样子的,瞧瞧 基本网络链接 : http://openw ...

  9. MySql、Oracle、MSSQL中的字符串的拼接

    字符串的拼接 1,Mysql 在Java.C#等编程语言中字符串的拼接可以通过加号“+”来实现,比如:"1"+"3"."a"+"b ...

随机推荐

  1. Python中的多进程:fork和multiprocessing

    Python的多进程 套路1:os.fork() 先敲段代码: #!/usr/bin/env python3 import os os.fork() print('1111111111') 执行结果: ...

  2. cordova热更新插件的使用

    cordova常用命令  一.添加插件 新建Cordova项目 cordova create CordovaHotCode com.ezample.hotcode 添加Android平台 在新建项目的 ...

  3. thinkphp join 表前缀

    public function get_user_group_title($uid){ $pre = C('DB_PREFIX'); $res = M('AuthGroupAccess aga')-& ...

  4. [lampp] 不能通过互联网连接数据库 MySQL is not accessable via network

    LAMPP安装目录下的/etc/my.cnf文件注释掉skip-networking #skip-networking#skip-networking

  5. C++中cin、cin.get()、cin.getline()、getline()、gets()等函数的用法(转)

    学C++的时候,这几个输入函数弄的有点迷糊:这里做个小结,为了自己复习,也希望对后来者能有所帮助,如果有差错的地方还请各位多多指教(本文所有程序均通过VC 6.0运行) 1.cin 2.cin.get ...

  6. VB查询数据库之导出表格——机房收费总结(四)

    在机房收费系统中,有几个窗体需要导出数据到EXCEL表格中,如:学生上机记录查询窗体.学生充值记录查询窗体.收取金额查询窗体等. 前面的几篇总结,大家建议我不要把代码写的太详细,这样,不利于读者思考, ...

  7. [BZOJ4813][CQOI2017]小Q的棋盘(DP,贪心)

    4813: [Cqoi2017]小Q的棋盘 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 804  Solved: 441[Submit][Statu ...

  8. [BZOJ2726][SDOI2012]任务安排(DP+凸壳二分)

    2726: [SDOI2012]任务安排 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1580  Solved: 466[Submit][Statu ...

  9. [BZOJ 3553][SHOI2014]三叉神经树

    传送门(下面也有题面) 题目大意: 一颗有根树,每个非叶子节点都有三个子节点,每个节点的权为0/1. 每个节点的权 取决于其所有子节点中 哪种权出现的次数更多. 有若干次询问,每次询问修改一个叶子节点 ...

  10. 【hibernate】错误:org.hibernate.HibernateException: identifier of an instance of com.agen.entity.Monthdetail was altered from xx to xx

    所报错误: org.hibernate.HibernateException: identifier of an instance of com.agen.entity.Monthdetail was ...