如何在Nuxt框架中结合Strapi CMS展示集合类型博客中的图片？

我来帮你排查这个问题，大概率是Strapi的数据结构或者请求配置出了问题，咱们一步步梳理：

1. 先确认Strapi返回的图片字段结构 #

Strapi v4版本的响应结构和v3差异很大，图片数据会嵌套在data.attributes层级里。你可以先在模板里临时加一行代码，打印单篇博客的图片字段详情，看看实际结构：

<pre>{{ blog.img }}</pre>

如果输出的结构是类似 { data: { id: xxx, attributes: { url: '/uploads/xxx.jpg' } } }，那你原来的blog.img.url路径就错了，得改成blog.img.data.attributes.url。

2. 确保请求Strapi时关联了图片字段 #

当你从Nuxt请求Strapi的博客列表时，必须用populate参数来获取图片的详细数据——不然Strapi只会返回图片的ID，不会带URL信息。比如用Nuxt的useFetch请求时，代码应该是这样的：

const { data: allBlogs } = await useFetch('http://localhost:1337/api/blogs', {
  params: {
    populate: 'img' // 这里要和你Strapi里的图片字段名一致，比如你的字段叫img就写img
  }
})

如果需要关联多个字段，可以用populate=*获取所有关联数据，但生产环境建议精准指定字段，避免冗余请求。

3. 检查Strapi的媒体文件访问权限 #

Strapi默认不会给公共用户开放上传文件的访问权限，你需要去后台配置：

• 进入Settings > Roles > Public
• 找到Upload权限组，勾选find和findOne权限
• 保存修改，这样前端才能正常访问图片资源

4. 修正图片路径的代码 #

结合上面的排查，正确的图片路径写法应该是这样的（以Strapi v4为例）：

<img 
  :src="`http://localhost:1337${blog.img.data.attributes.url}`" 
  :alt="blog.title || 'Blog image'" 
/>

另外推荐把Strapi地址放在Nuxt的环境变量（.env文件）里，比如：

NUXT_PUBLIC_STRAPI_URL=http://localhost:1337

然后代码里用环境变量拼接，更灵活：

<img 
  :src="`${process.env.NUXT_PUBLIC_STRAPI_URL}${blog.img.data.attributes.url}`" 
  :alt="blog.title || 'Blog image'" 
/>

按照这几步排查调整，应该就能解决图片不显示的问题啦。

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