Vue.js alt description仅出现在v-for中的第一个图像中

Vue.js alt description仅出现在v-for中的第一个图像中,vue.js,nuxt.js,Vue.js,Nuxt.js,我正在使用制作一个应用程序,我在vuejsv-for中有一个图像标记,第一个图像的alt描述看起来很好,但之后,其余图像的alt描述为空 下面是一些代码: <div v-for="photo in photos" class="col-lg-3 col-md-4 col-6 image-column" :key="photo.id"> <nuxt-link :to="`/photos/${photo.id}`"> <div class="image-gr

我正在使用制作一个应用程序,我在vuejs
v-for
中有一个图像标记,第一个图像的alt描述看起来很好,但之后,其余图像的alt描述为空

下面是一些代码:

<div v-for="photo in photos" class="col-lg-3 col-md-4 col-6 image-column" :key="photo.id">
  <nuxt-link :to="`/photos/${photo.id}`">
    <div class="image-grid position-relative">
        <img class="img-fluid img-thumbnail lazyload w-100" :data-src="photo.urls.thumb" :alt="photo.alt_description" />
        <app-image-meta :photo="photo"></app-image-meta>
    </div>
  </nuxt-link>
</div>

以下是我获取照片数据的方式:

<script>
import axios from 'axios'
const access_token = 'xxx'
axios.defaults.headers.common['Authorization'] = `Client-ID ${access_token}`

import appImageGrid from '../components/image-grid.vue'

export default {
  async asyncData( { params, store } ) {
    let { data } = await axios.get(`https://api.unsplash.com/photos/?page=${params.num ? params.num : 1}&per_page=12`)
    return { photos: data }
  },
  components: {
    appImageGrid
  }
}
</script>

从“axios”导入axios
const access_令牌='xxx'
axios.defaults.headers.common['Authorization']=`Client ID${access\u token}`
从“../components/image grid.vue”导入appImageGrid
导出默认值{
异步数据({params,store}){
让{data}=wait axios.get(`https://api.unsplash.com/photos/?page=${params.num?params.num:1}&per_page=12`)
返回{照片:数据}
},
组成部分:{
appImageGrid
}
}

我检查了我的邮递员,所有的图片都有alt描述,所以这不是问题。谢谢你的帮助

抱歉,伙计们,我刚刚意识到我看到的第一批照片有一个alt描述,但奇怪的是,其他照片的alt描述为null。在挖掘了一点并查看了更多批次的照片后,我后来意识到之前批次的alt描述不是作者故意写的。谢谢你的帮助,菲尔。

对不起,伙计们,我刚刚意识到我正在看的第一批照片有一个alt描述,但奇怪的是,其他照片的alt描述为null。在挖掘了一点并查看了更多批次的照片后,我后来意识到之前批次的alt描述不是作者故意写的。感谢您的帮助,Phil。

所以我刚刚检查了Vue开发工具,是的,第一个工具的
alt\u说明显示得很好,但是对于REST,它显示为
null
。我正在使用Nuxt提供的
async asyncData
方法。从那里,我获取照片的对象及其id、alt描述、图像等,并将它们放在名为
photo
的属性中。感谢您的更新。您能在浏览器的网络控制台中看到请求吗?如果是的话,答案看起来正确吗?数组中的每个条目都具有您期望的所有属性吗?嘿,Phil。好吧,我不确定你是否会恨我,但我刚刚意识到,从我看到的三批照片中,第一批有alt描述,其余的故意没有alt描述(来自作者本身)。代码是正确的。抱歉浪费了你的时间,我道歉!因此,我刚刚检查了Vue开发工具,是的,第一个工具的
alt_说明
显示得很好,但是对于REST,它显示为
null
。我使用的是Nuxt提供的
async asynchdata
方法。从那里,我获取照片的对象及其id、alt描述、图像等,并将它们放在名为
photo
的属性中。感谢您的更新。您能在浏览器的网络控制台中看到请求吗?如果是的话,答案看起来正确吗?数组中的每个条目都具有您期望的所有属性吗?嘿,Phil。好吧,我不确定你是否会恨我,但我刚刚意识到,从我看到的三批照片中,第一批有alt描述,其余的故意没有alt描述(来自作者本身)。代码是正确的。抱歉浪费了你的时间,我道歉!