想实现动态加载图片,当点击“首页”时,图片变色

代码如下:

      <mt-tabbar v-model="selected" fixed class="border-1px-top">
<mt-tab-item id="首页" >
<img :src="imgs.img1" slot="icon">首页
</mt-tab-item>
 imgs:{
'img1': "../assets/icon/index.png",
// 'img1': "../assets/icon/indexchoose.png",
'img2': "../assets/icon/brand.png",
'img3': "../assets/icon/cart.png",
'img4': "../assets/icon/me.png
},

图片一直加载不出来,

以为是路径问题,但是不使用动态加载<img src="../assets/icon/index.png" slot="icon">图片是能正常出来的。

这就很纳闷了,搜索了半天,发现原来vue中动态加载图片需要使用require引用资源的,于是改代码为以下,OK了

 imgs:{
'img1': require("../assets/icon/index.png"),
// 'img1': "../assets/icon/indexchoose.png",
'img2': require('../assets/icon/brand.png'),
'img3': require("../assets/icon/cart.png"),
'img4': require("../assets/icon/me.png")
},

参考:

https://blog.csdn.net/qq_33744228/article/details/81319485

https://blog.csdn.net/aliven1/article/details/80453213

vue中动态加载img的更多相关文章

  1. vue中动态加载组件+开发者模式+JS参数值传递和引用传递

    今天写vue里面通过接口反参动态加载组件时候 跟着同学...学习到了 一.先说说vue 内置组件 component 的用法 component组件可以来专门用来进行组件的切换,使用is来绑定你的组件 ...

  2. vue中动态加载图片路径的方法

    assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src=”./logo.png”>和background:url(./logo.p ...

  3. 某APK中使用了动态注册BroadcastReceiver,Launcher中动态加载此APK出现java.lang.SecurityException异常的解决方法

    在某APK中,通过如下方法动态注册了一个BroadcastReceiver,代码参考如下: @Override protected void onAttachedToWindow() { super. ...

  4. 在ASP.NET中动态加载内容(用户控件和模板)

    在ASP.NET中动态加载内容(用户控件和模板) 要点: 1. 使用Page.ParseControl 2. 使用base.LoadControl 第一部分:加载模板 下 面是一个模板“<tab ...

  5. 在MVC应用程序中动态加载PartialView

    原文:在MVC应用程序中动态加载PartialView 有时候,我们不太想把PartialView直接Render在Html上,而是使用jQuery来动态加载,或是某一个事件来加载.为了演示与做好这个 ...

  6. 在VC中动态加载ODBC的方法

    在使用VC.VB.Delphi等高级语言编写数据库应用程序时,往往需要用户自己在控制面板中配置ODBC数据源.对于一般用户而言,配置ODBC数据源可能是一件比较困难的工作.而且,在实际应用中,用户往往 ...

  7. WPF中动态加载XAML中的控件

    原文:WPF中动态加载XAML中的控件 using System; using System.Collections.Generic; using System.Linq; using System. ...

  8. vue路由动态加载

    注意:是动态加载不是动态路由 解决的问题: 动态配置菜单栏的路由参数--实现菜单级的权限控制 问题成因: 在vue实例化的时候vuex.vue-router 就需要加载完毕,无法使用异步的方式从服务器 ...

  9. vue如何动态加载本地图片

    大家好,我是前端队长Daotin,想要获取更多前端精彩内容,关注我(全网同名),解锁前端成长新姿势. 以下正文: 今天遇到一个在vue文件中引入本地图片的问题,于是有了这篇文章. 通常,我们的一个im ...

随机推荐

  1. Time crumbles things; everything grows old under the power of Time and is forgotten through the lapse of Time

    Time crumbles things; everything grows old under the power of Time and is forgotten through the laps ...

  2. PHP文件和目录操作-----复制、移动、重命名、删除文件

    PHP通过copy()函数来复制一个文件.用法如下: bool copy(string $source, string $dest) 其中$source是源文件的路径,$dest是目的文件的路径.函数 ...

  3. 【BZOJ3122】【SDoi2013】随机数生成器

    Description Input 输入含有多组数据,第一行一个正整数T,表示这个测试点内的数据组数.   接下来T行,每行有五个整数p,a,b,X1,t,表示一组数据.保证X1和t都是合法的页码. ...

  4. 单选复选按钮以及Toast学习笔记

    1:单选按钮是以组的形式呈现,xml布局文件中需要定义一个RadioGroup,然后在这个组内再定义RadioButton.在java代码中为该按钮添加监听时,需要用组名来引用对应的方法setOnCh ...

  5. fread读取文件(二进制文件)

    fread()是c库函数,利于移植,使用缓存,效率较read()高. 原型: size_t fread(void *buffer, size_t size, size_t count, FILE * ...

  6. Oracle的nvl

    在Oracle中nvl(字段名,value)函数用于对没有值的字段做处理在MySql中ifnull(字段名,value)是一样的功能

  7. zabbix3.4 监控网卡流量设置差量

    自定义监控项的时候 看里面预设的监控网卡下载流量的key是 net.if.in[if,<mode>]这次可以监控流量了 但是添加监控项的时候 看网上别人的 都是可以设置数值是每秒的差量 出 ...

  8. mybatis随笔五之Executor

    在上一篇文章我们分析到了mapper接口方法的实现实际上是交由代理类来实现的,并最终调用Executor来查询,接下来我们对executor.query(ms, wrapCollection(para ...

  9. Javascript实现对象的创建

    能使用{}创建对象就不要使用new Object,能使用[]创建数组就不要使用new Array,JS中字面量的访问速度要高于对象. 1.通过object构造函数创建单个对象 var o = new ...

  10. iOS7.0中UILabel高度调整注意事项

    转自:http://blog.csdn.net/k12104/article/details/33731833 http://herkuang.info/blog/2013/12/31/ios7%E4 ...