如果是直接动态获取完整的图片地址可以使用以下方法

  1. <template>
  2. <img :src="url">
  3. </template>
  4.  
  5. <script>
  6. export default {
  7. data(){
  8. return {
  9. url:'完整的图片地址'
  10. }
  11. }
  12. }
  13. </script>

如果想动态的改变地址中的某个索引,必须使用require来加载图片,如下

  1. <template>
  2. <img :src="require('../_img/f_touxb'+url+'.png')">
  3. </template>
  4.  
  5. <script>
  6. export default {
  7. data(){
  8. return {
  9. url:1
  10. }
  11. },
  12. created(){
  13. this.randoms()
  14. },
  15. methods:{
  16. randoms(){
  17. this.url = Math.ceil(Math.random()*5)//随机生成1到5的数字
  18. }
  19. }
  20. }
  21. </script>

vue动态加载图片的更多相关文章

  1. vue动态加载图片,取消格式验证

    vue 一. 动态加载图片 (以vue模板为例) app.vue 代码如下: <template> <div id="app"> <img :src= ...

  2. Vue动态加载图片图片不显示

    图片是放在assets文件夹下的 使用require进行解决 图片不显示的原因 在webpack,将图片放在assets中,会将图片图片来当做模块来用,因为是动态加载的,所以url-loader将无法 ...

  3. vue 动态加载图片路径报错解决方法

    最近遇到图片路径加载报错的问题 之前一直都是把图片放到assets的文件下的.总是报错,看到一些文章并且尝试成功了,特意记录下 首先先说明下vue-cli的assets和static的两个文件的区别, ...

  4. Vue动态加载异步组件

    背景: 目前我们项目都是按组件划分的,然后各个组件之间封装成产品.目前都是采用iframe直接嵌套页面.项目中我们还是会碰到一些通用的组件跟业务之间有通信,这种情况下iframe并不是最好的选择,if ...

  5. Unty3D动态加载图片

    试验动态加载图片,代码如下: using UnityEngine; using System.Collections; public class DynamicLoad : MonoBehaviour ...

  6. ie6,7下js动态加载图片不显示错误

    ie6,7下js动态加载图片不显示错误 先描述一下出现这种匪夷所思bug的背景: 我在页面加载的时候加载一堆小缩略图,<a href="javascript:void(0);" ...

  7. asp.net向后台传参数动态加载图片

    //向后台传参数动态加载图片 $(function() { $("#Button1").click(function() { var stockcode = getUrlParam ...

  8. 【MFC】picture控件 两种有细微差别的动态加载图片方法

    摘自:http://www.jizhuomi.com/software/193.html VS2010/MFC编程入门之二十七(常用控件:图片控件Picture Control) 分类标签: 编程入门 ...

  9. vue动态加载组件

    vue动态加载组件,可以使用以下方式 <component :is="propertyname" v-for="tab in tabs"></ ...

随机推荐

  1. IDEA将指定package(指定文件)打成jar包

    写在前面 真的是好记性不如烂笔头 需求 将项目中包名为org的package打成jar包 步骤 1.选择Artifacts>绿色+号>JAR>Empty name自定义, 我这里命名 ...

  2. index row size 2720 exceeds maximum 2712 for index "xxx" ,Values larger than 1/3 of a buffer page cannot be indexed.

    记录一个bug情况: 我有个表NewTable,复合主键(slaveid,resid,owner) CREATE TABLE "public"."NewTable&quo ...

  3. 爬虫中Requests模块

    Requests: 让 HTTP 服务人类 虽然Python的标准库中 urllib2 模块已经包含了平常我们使用的大多数功能,但是它的 API 使用起来让人感觉不太好,而 Requests 自称 “ ...

  4. spark streaming流式计算---监听器

    随着对spark的了解,有时会觉得spark就像一个宝盒一样时不时会出现一些难以置信的新功能.每一个新功能被挖掘,就可以使开发过程变得更加便利一点.甚至使很多不可能完成或者完成起来比较复杂的操作,变成 ...

  5. 转 mysql 备份导致 waiting for global read lock

    ######转 https://blog.csdn.net/weixin_34038652/article/details/92129498 近业务高峰期间经常会有开发跳起来说应用连接数据库超时了! ...

  6. iOS UILabel文字自适应高度自适应

    第一步:创建UILabel对象,并设置一些基本设置 UILabel *label = [[UILabel alloc] init]; label.text = @"8月29日,在雅加达亚运会 ...

  7. 考前最后的感叹:CSP2019 Bless All! & AFO

    因为没有退路,所以勇往直前. ----来自高二老年选手小蒟蒻XY Upd:凉凉了,你们都稳了...我看来是超不过准考证号了qwq[大哭] Upd:来自联考txdy的神仙gcz Upd:久远的回忆:会不 ...

  8. saltstack配置文件详解

    软件依赖 Python版本大于2.6或版本小于3.0: 对Python版本要求 msgpack-python: SalStack消息交换库 YAML: SaltStack配置解析定义语法 Jinja2 ...

  9. java内置的四大函数式接口

    一.Consumer:消费型接口(void accept(T t)) 举一个例子 public class LambdaTest { @Test public void test() { happyT ...

  10. LeetCode 74. 搜索二维矩阵(Search a 2D Matrix)

    74. 搜索二维矩阵 74. Search a 2D Matrix 题目描述 编写一个高效的算法来判断 m x n 矩阵中,是否存在一个目标值.该矩阵具有如下特性: 每行中的整数从左到右按升序排列. ...