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>
  • 相关阅读:
    容斥原理学习(Hdu 4135,Hdu 1796)
    ACdream 1112
    CodeChef--Cards, bags and coins
    ACdream 1108(莫队)
    Hdu 2586(LCA)
    CodeChef--EQUAKE
    Hackerrank--Mixing proteins(Math)
    Clash Credenz 2014 Wild Card Round题解
    Codeforces 463D
    CodeChef August Lunchtime 2014 题解
  • 原文地址:https://www.cnblogs.com/c--k/p/13527283.html
Copyright © 2011-2022 走看看