Nuxt调用Strapi接口获取数据时无法读取媒体资源URL问题求助

问题原因 #

• 模板语法使用错误：你用了单引号包裹需要插值的内容，JS模板字符串需要用反引号（）包裹，且动态变量必须放在${}`内部才能正常解析
• media字段为数组类型：接口返回的media是数组格式，需要先取下标访问对应元素，才能拿到内部的url属性
• 多余的url()包裹：url()是CSS中设置背景图的语法，Vuetify的v-img组件的src属性直接传入图片地址字符串即可

修正后代码 #

<!-- 需先通过v-for遍历drinks数组获取单个饮品项drink -->
<v-img
  v-for="drink in drinks"
  :key="drink.id"
  :src="`http://localhost:1337${drink.media[0].url}`"
></v-img>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      drinks: [],
      error: null
    }
  },
  async created() {
    try {
      const response = await axios.get("http://localhost:1337/drinks");
      this.drinks = response.data;
    } catch (error) {
      this.error = error;
    }
    console.log(this.drinks)
  }
}
</script>

可选优化 #

如果存在部分饮品没有上传媒体资源的情况，可使用可选链避免报错，无图片时可传入占位图地址：

<v-img
  v-for="drink in drinks"
  :key="drink.id"
  :src="drink.media?.[0]?.url ? `http://localhost:1337${drink.media[0].url}` : '你的占位图地址'"
></v-img>

内容的提问来源于stack exchange，提问作者davidi03