vue，请求获取图片code，img中产生两次src获取资源问题

╰+攻爆jí腚メ 2022-05-19 12:44 413阅读 0赞

示例代码：

  1. <template>
  2.     <!-- 1、 -->
  3.     <img :src="imgUrl + MainImg + '_0x0'" alt="款式主图" v-if="MainImg != ''">
  4. <!-- 2、<table class="table-content" v-if="list.ActivityMemberList.length > 0"> -->
  5.     <table class="table-content" v-if="ActivityMemberList.length > 0">
  6.         <tr v-for="(infoItem, inforIndex) in ActivityMemberList" :key="inforIndex">
  7.             <td>{
  8.    {Number(inforIndex) + 1}}</td>
  9.             <td>{
  10.    {infoItem.CreateAccount}}</td>
  11.             <td>{
  12.    {infoItem.BuyQuantity}}</td>                            
  13.         </tr>
  14.     </table>
  15. </template>
  16. <script>
  17.     created () {
  18.         this.getList ();
  19.     },
  20.     data () {
  21.         return: {
  22.             imgUrl: Site.api.upfileBaseUrl,
  23.             list：{},
  24.             MainImg: '',
  25.             ActivityMemberList: [],
  26.         }
  27.     },
  28.     watch () {
  29.         list: {
  30.             handler: function (val, oldVal) {
  31.                 this.MainImg = val.MainImg;
  32.                 this.ActivityMemberList = val.ActivityMemberList; 
  33.             }
  34.         }
  35.     },
  36.     methods: {
  37.         getList () {
  38.             //请求中获取的数据data（对象）
  39.             this.list = data;
  40.         }
  41.     }
  42. </script>

注意：

1、created获取初始化数据，请求返回需要时间，如果请求返回的数据直接绑定到src，dom加载完成后，src的值从undefined变为相应的code，造成获取两次src的问题？

解决： watch监听请求返回的数据，code赋值给src，并且在src为空的情况下不显示img。

2、html结构中list.ActivityMemberList是获取不到的，所以list.ActivityMemberList.length是报错的。

解决： 模板中绑定的结构中，v-if使用时，data中一定需要相对应。

发表评论

表情：
评论列表 （有 0 条评论，413人围观）

还没有评论，来说两句吧...

相关阅读