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了。

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