zoukankan      html  css  js  c++  java
  • vue中动态加载img

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

    代码如下:

          <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

    好记性不如烂笔头,每天记录一点点
  • 相关阅读:
    Ajax ——数据解析
    AJAX
    Flask ==> 目录结构
    Flask ==> Migrate
    Flask ==> scoped_session
    Flask ==> SQLhelper
    Flask ==> ORM之sqlalchemy
    Flask ==> wtforms
    Flask ==> 用扩展实现的简单的页面登录
    分页器组件
  • 原文地址:https://www.cnblogs.com/wayneliu007/p/10215843.html
Copyright © 2011-2022 走看看