如何在Vue中渲染API返回JSON里嵌套的img src？

你的代码存在几处关键问题导致无法正确渲染图片，下面是具体修正方案：

问题分析 #

1. fishName 和 fishPhoto 被错误定义为数组，而你需要的是字符串类型的属性名——数组作为键名访问对象时会被转为逗号分隔的字符串，根本无法匹配API返回的字段。
2. 模板里直接输出 fish[fishPhoto] 只能打印对象，没法获取嵌套的 src 链接；而且图片需要用 <img> 标签渲染，不能直接输出文本。
3. 部分物种可能没有"Species Illustration Photo"字段，必须做容错处理避免页面报错。

修正后的代码 #

JavaScript 部分

let app = Vue.createApp({ 
  data() {
    return {
      fishes: [],
      fishName: "Species Name", // 改为字符串类型的属性名
      fishPhoto: "Species Illustration Photo" // 改为字符串类型的属性名
    }
  },
  mounted() {
    fetch('https://www.fishwatch.gov/api/species')
      .then(res => res.json())
      .then(data => {
        this.fishes = data
      })
      .catch(err => console.error('请求失败:', err)) // 新增错误捕获，方便排查问题
  }
})
app.mount('.app')

注：删除了代码开头多余的fetch调用，只保留mounted生命周期里的请求即可。

HTML 部分

<div class="app">
    <ul>
      <li v-for="(fish, i) in fishes" :key="i">
        <h3>{{ fish[fishName] }}</h3>
        <!-- 用可选链处理无图片的情况，避免报错 -->
        <img 
          v-if="fish[fishPhoto]?.img?.src"
          :src="fish[fishPhoto].img.src" 
          :alt="fish[fishName]"
          style="width: 200px;"
        >
        <span v-else>暂无图片</span>
      </li> 
    </ul>
</div>

关键修改说明 #

• 把fishName和fishPhoto改为字符串，确保能精准匹配API返回对象的对应字段。
• 使用<img>标签绑定src属性，通过嵌套访问fish[fishPhoto].img.src拿到图片的真实链接。
• 用v-if结合可选链操作符?.判断图片资源是否存在，避免因部分物种无图片导致页面崩溃；同时用v-else给出友好提示。
• 添加物种名称的展示，让列表内容更直观。

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