zoukankan      html  css  js  c++  java
  • VUE图片动态加载静态资源问题

    最近碰到一个小问题,有这样一个代码段,内容是循环加载<a>标签,每个a下面都有一个 img 和span,img的src 和span的名称需要动态加载,img加载的本地静态资源;

    原有写法,menuName可以正常加载,但是imageUrl不生效:

     1 <ul class="scroll-menu">
     2   <li v-for="menu in menuList">
     3       <h3>{{menu.groupName}}</h3> 
     4          <div class="mui-table-view-cell" :route="sub.path" :menuName="sub.menuName" :imageUrl="sub.imageUrl" v-for="sub in menu.subList">
     5          <a class="mui-navigate-right"> 
     6            <p style=" line-height: 38px;">
     7              <img src={{sub.imageUrl}} />&nbsp;&nbsp;&nbsp;<span style=" line-height: 38px;">{{sub.menuName}}</span>
     8            </p>
     9          </a>
    11       </div>                                
    12  </li>
    13 </ul>

    后修改写法如下,就ok了。

     1 <ul class="scroll-menu">
     2   <li v-for="menu in menuList">
     3       <h3>{{menu.groupName}}</h3> 
     4          <div class="mui-table-view-cell" :route="sub.path" :menuName="sub.menuName" :imageUrl="sub.imageUrl" v-for="sub in menu.subList">
     5          <a class="mui-navigate-right"> 
     6            <p style=" line-height: 38px;">
     7              <img :src="sub.imageUrl" />&nbsp;&nbsp;&nbsp;<span style=" line-height: 38px;">{{sub.menuName}}</span>
     8            </p>
     9          </a>
    11       </div>                                
    12  </li>
    13 </ul>
  • 相关阅读:
    Mysql
    JavaScript常用事件
    css
    HTML
    判断pc还是手机打开跳转到别的网页
    queue 队列
    兼容firstChild和firstElementChild
    总结各种width,height,top,left
    原生js提取非行间样式
    ie8 不支持media
  • 原文地址:https://www.cnblogs.com/c--k/p/13527283.html
Copyright © 2011-2022 走看看