vue组件属性中字符串如何拼接变量?
不得不说,对于水平只有jquery的vue初学者来说,vue的图片加载实现确实挺坑的,在文档中也没有看到说明。经过百度之后终于知道了什么情况。
首先:
这样是没问题的:
<img src="./../assets/avatar.png" />
但是我把地址提取出来,当道 data 里之后就不行了。
<img :src="logoSrc" > export default {
data () {
return {
logoSrc: './../assets/avatar.png'
}
}
}
这样会报404错误。
而在
js
里写图片路径其实只是字符串 webpack
不会处理如果想这么做 你可以把图片放在最外层的
static
文件夹里,当然我不推荐这种做法。还有一种方法就是通过
import
require
引入图片。比如:还有一种情况。后端传递过来的图片是不需要 require 的。如果要显示,直接在 img 的 src 设置后端返回的地址即可。
用哪种方法就看实际情况吧,图片少的话用require是蛮不错的,如果多的话,是不是会很麻烦呢。
vue组件属性中字符串如何拼接变量?的更多相关文章
- Vue组件template模板字符串几种写法
在定义Vue组件时,组件的模板template选项需要的是一个字符串,当其内容较复杂需要换行时,需要简单处理一下,具体有五种方式: 方式一:使用 \ 转义换行符 <!DOCTYPE html&g ...
- 在vue组件库中不能使用v-for
没事的,有点时候编辑器报错,但运行不一定出错, 在vue组件中注意template标签
- R语言中字符串的拼接操作
在R语言中 paste 是一个很有用的字符串处理函数,可以连接不同类型的变量及常量. 函数paste的一般使用格式为: paste(..., sep = " ", collapse ...
- vue 组件属性props,特性驼峰命名,连接线使用
网址:https://www.cnblogs.com/alasq/p/6363160.html 总结如下:vue的组件的props属性支持驼峰命名,不支持连接线命名,使用是用连接线进行赋值或者数据绑定 ...
- js中字符串的拼接的另一种方法
// 按一定长度截断字符串,并使用 + 运算符进行连接. // 分隔字符串尽量按语义进行,如不要在一个完整的名词中间断开. // 特别的,对于HTML片段的拼接,通过缩进,保持和HTML相同的结构. ...
- python中字符串的拼接
1.+ 号 2.format() 3.f"{username}登录成功" 4.%s 5.列表中的 join 6.逗号 http://www.cnblogs.com/gengcx/p ...
- vue 组件 模板中根数据绑定需要指明路径并通信父
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>T ...
- vue动态绑定src加字符串拼接
关键点 1.img中的src的字符串动态拼接 2.style中的background属性赋值 一.img中的src的字符串动态拼接 1.问题是这样子的,瞧瞧 基本网络链接 : http://openw ...
- MySql、Oracle、MSSQL中的字符串的拼接
字符串的拼接 1,Mysql 在Java.C#等编程语言中字符串的拼接可以通过加号“+”来实现,比如:"1"+"3"."a"+"b ...
随机推荐
- Python中的多进程:fork和multiprocessing
Python的多进程 套路1:os.fork() 先敲段代码: #!/usr/bin/env python3 import os os.fork() print('1111111111') 执行结果: ...
- cordova热更新插件的使用
cordova常用命令 一.添加插件 新建Cordova项目 cordova create CordovaHotCode com.ezample.hotcode 添加Android平台 在新建项目的 ...
- thinkphp join 表前缀
public function get_user_group_title($uid){ $pre = C('DB_PREFIX'); $res = M('AuthGroupAccess aga')-& ...
- [lampp] 不能通过互联网连接数据库 MySQL is not accessable via network
LAMPP安装目录下的/etc/my.cnf文件注释掉skip-networking #skip-networking#skip-networking
- C++中cin、cin.get()、cin.getline()、getline()、gets()等函数的用法(转)
学C++的时候,这几个输入函数弄的有点迷糊:这里做个小结,为了自己复习,也希望对后来者能有所帮助,如果有差错的地方还请各位多多指教(本文所有程序均通过VC 6.0运行) 1.cin 2.cin.get ...
- VB查询数据库之导出表格——机房收费总结(四)
在机房收费系统中,有几个窗体需要导出数据到EXCEL表格中,如:学生上机记录查询窗体.学生充值记录查询窗体.收取金额查询窗体等. 前面的几篇总结,大家建议我不要把代码写的太详细,这样,不利于读者思考, ...
- [BZOJ4813][CQOI2017]小Q的棋盘(DP,贪心)
4813: [Cqoi2017]小Q的棋盘 Time Limit: 10 Sec Memory Limit: 512 MBSubmit: 804 Solved: 441[Submit][Statu ...
- [BZOJ2726][SDOI2012]任务安排(DP+凸壳二分)
2726: [SDOI2012]任务安排 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 1580 Solved: 466[Submit][Statu ...
- [BZOJ 3553][SHOI2014]三叉神经树
传送门(下面也有题面) 题目大意: 一颗有根树,每个非叶子节点都有三个子节点,每个节点的权为0/1. 每个节点的权 取决于其所有子节点中 哪种权出现的次数更多. 有若干次询问,每次询问修改一个叶子节点 ...
- 【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 ...