vue动态加载图片
如果是直接动态获取完整的图片地址可以使用以下方法
<template>
<img :src="url">
</template> <script>
export default {
data(){
return {
url:'完整的图片地址'
}
}
}
</script>
如果想动态的改变地址中的某个索引,必须使用require来加载图片,如下
<template>
<img :src="require('../_img/f_touxb'+url+'.png')">
</template> <script>
export default {
data(){
return {
url:1
}
},
created(){
this.randoms()
},
methods:{
randoms(){
this.url = Math.ceil(Math.random()*5)//随机生成1到5的数字
}
}
}
</script>
vue动态加载图片的更多相关文章
- vue动态加载图片,取消格式验证
vue 一. 动态加载图片 (以vue模板为例) app.vue 代码如下: <template> <div id="app"> <img :src= ...
- Vue动态加载图片图片不显示
图片是放在assets文件夹下的 使用require进行解决 图片不显示的原因 在webpack,将图片放在assets中,会将图片图片来当做模块来用,因为是动态加载的,所以url-loader将无法 ...
- vue 动态加载图片路径报错解决方法
最近遇到图片路径加载报错的问题 之前一直都是把图片放到assets的文件下的.总是报错,看到一些文章并且尝试成功了,特意记录下 首先先说明下vue-cli的assets和static的两个文件的区别, ...
- Vue动态加载异步组件
背景: 目前我们项目都是按组件划分的,然后各个组件之间封装成产品.目前都是采用iframe直接嵌套页面.项目中我们还是会碰到一些通用的组件跟业务之间有通信,这种情况下iframe并不是最好的选择,if ...
- Unty3D动态加载图片
试验动态加载图片,代码如下: using UnityEngine; using System.Collections; public class DynamicLoad : MonoBehaviour ...
- ie6,7下js动态加载图片不显示错误
ie6,7下js动态加载图片不显示错误 先描述一下出现这种匪夷所思bug的背景: 我在页面加载的时候加载一堆小缩略图,<a href="javascript:void(0);" ...
- asp.net向后台传参数动态加载图片
//向后台传参数动态加载图片 $(function() { $("#Button1").click(function() { var stockcode = getUrlParam ...
- 【MFC】picture控件 两种有细微差别的动态加载图片方法
摘自:http://www.jizhuomi.com/software/193.html VS2010/MFC编程入门之二十七(常用控件:图片控件Picture Control) 分类标签: 编程入门 ...
- vue动态加载组件
vue动态加载组件,可以使用以下方式 <component :is="propertyname" v-for="tab in tabs"></ ...
随机推荐
- Linux学习笔记(一)
操作系统(operation system,os) 主要作用是管理好硬件设备,并为用户和应用程序提供一个简单的接口, 以便于使用,作为中间人,连接软件和硬件 操作系统linux发展历程 unix-&g ...
- Linux零拷贝技术 直接 io
Linux零拷贝技术 .https://kknews.cc/code/2yeazxe.html https://zhuanlan.zhihu.com/p/76640160 https://clou ...
- swoole流程图
程图,便于以后回忆下 总结几点如下: 首先主进程监听pipe_master事件, 子进程监听pipe_worker事件 通过主进程派生的线程 swReactorThread *thread = swS ...
- Xamarin图表开发基础教程(6)OxyPlot框架
Xamarin图表开发基础教程(6)OxyPlot框架 Xamamin iOS中绘制线图OxyPlotiOSDemo [示例OxyPlotiOSDemo]下面将实现线图的显示.具体的操作步骤如下: ( ...
- Python高级笔记(十一)装饰器【面试】
1. 需求 开发封闭原则:虽然在这个原则是用的面向对象开发,但是也适用于函数式编程,简单来说,它规定已经实现的功能代码不允许被修改,但可以被拓展,即: 封闭:已实现的功能代码块 开发:对拓展开发 2. ...
- Tensorflow问题
TypeError: 'urban' has type str, but expected one of: bytes 在前面添加"b"(例如,b'urban'),或者处理为var ...
- [LeetCode] 245. Shortest Word Distance III 最短单词距离 III
This is a follow up of Shortest Word Distance. The only difference is now word1 could be the same as ...
- [LeetCode] 505. The Maze II 迷宫 II
There is a ball in a maze with empty spaces and walls. The ball can go through empty spaces by rolli ...
- ehcache和redis的区别及适用场景
区别: (1)Redis 独立程序,是通过socket访问到缓存服务,效率比ecache低,比数据库要快很多,处理集群和分布式缓存方便,有成熟的方案 (2)Ehcache 直接在jvm虚拟机中缓存,速 ...
- 【计算机视觉】【神经网络与深度学习】YOLO v2 detection训练自己的数据2
1. 前言 关于用yolo训练自己VOC格式数据的博文真的不少,但是当我按照他们的方法一步一步走下去的时候发现出了其他作者没有提及的问题.这里就我自己的经验讲讲如何训练自己的数据集. 2.数据集 这里 ...