vue.js 2 img 标签在从服务器重新渲染（再次获取）数据后丢失

Posted 2023-02-22

【中文标题】vue.js 2 img 标签在从服务器重新渲染（再次获取）数据后丢失

【英文标题】：vue.js 2 img tag lost after re-render ( fetch again ) data from server

【发布时间】：2018-04-28 04:01:14

【问题描述】：

我在我的项目中使用 vuejs 工作正常，直到我遇到这个问题：我的页面显示带有图像轮播“猫头鹰轮播”的数据网格，代码如下所示：

fetchData: async function () 
    let self = this
    let query = self.$route.query

    if ($.inArray(self.rowPerPage, self.selectChoice) !== -1) 
      query['rowPerPage'] = self.rowPerPage
     else 
      query['rowPerPage'] = 5
    

    query['page'] = self.page

    /*Get Properties*/
    HTTP.get('property/search', 
      params: query,
      headers: 'pointer-access-token': window.$cookies.get('pointer-access-token')
    ).then(function (data) 

      let date = new Date();
      let testTime = data.data.data[0].created_at

      self.properties = data.data.data
      self.pages = data.data.pages
      self.rowPerPage = data.data.rowPerPage

    );
  

上面的代码从服务器读取数据，下面的代码是我重新渲染的html：

<div class="listing-item share-list-container" v-if="properties"
             v-for="(property,propertyIndex) in properties">
  ...
  <div class="listing-carousel">
    <div v-for="photo in property.photo">
   <img v-lazy="domainName + photoPath + photo" :>
    </div>
  </div>
  ...
</div>

“img”标签在 DOM 加载后消失了，它并没有从所有项目中丢失，这个标签在大多数项目上丢失了 1 或 2 个，有些项目仍然有这个图像标签。我真的对此有所了解。

感谢您的想法！

【参考方案1】：

将图像路径从您的服务器转换为字符串

【讨论】：

localhost:8081/img/bg1.jpeg

图片是从后端服务器加载的

然后调用图片标签内的路径

感谢您的想法！但我发现滑块“listing-carousel”是问题的原因。当我更改滑块时它工作得很好。