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>