图库图像随机加载问题

Question

我在加载获取的图库时遇到问题：当我加载图库页面时，图像会按预期加载，但是当我转到不同的页面（例如主页，然后返回图库页面）时，图像不会加载，并且容器完全是空的，换句话说，从一个页面跳转到另一个页面会使图库页面中的图像随机加载。如果我不清楚，请告诉我，以便我可以详细说明。预先感谢。

这就是我获取获取画廊的方式

export default {
data(){
  return{
    indexGal: null
    filter:'original',
    gallery:['images url are listed here'],
    filteredGallery:[]
  }
},

computed:{
  fetchedGallery() {
    if (this.filter) {
      return this.gallery.filter(i => i.cat === this.filter)
    }
    return this.gallery
  }
},
methods: {
  handleImageError(event) {
    console.error('Image failed to load:', event.target.src);
  }
}

}

这就是我展示图像的方式

v-container
   v-layout
     v-flex(v-for='(image,index) in fetchedGallery', :key='index' :item='image')
       v-card.d-flex
         v-img(:src="image.url" @click='indexGal = index')
                   
    no-ssr
      LightGallery(:images='fetchedGallery' :index='indexGal' :disable-scroll='true' @close='indexGal = null')

Answer 1

这个问题很可能是由 vue 处理反应性和组件生命周期的方式引起的。我建议在

<keep-alive>

标签周围使用

<router-view>

以避免在导航过程中不必要的组件破坏和重新创建。

<keep-alive>
    <router-view />
  </keep-alive>

这将确保一旦加载的组件在您导航到另一个页面时不会被破坏。

此外，我还建议使用

reactive

来声明您的图库图像。

gallery = reactive([
'insert images here.'])

要调试问题，请在返回后查看控制台日志

gallery

，检查其是否按预期运行。

另一种解决方案可以是在

fetchGallery

钩子内调用

onMounted

（这样你就可以确定在安装组件后它会被获取），但是当你从 API 获取时，这通常是建议的。