VueJs调用Strapi API时图片URL指向错误，无法显示图片求助

问题原因 #

Strapi返回的图片url是相对路径（例如/uploads/xxx.jpg），直接使用会自动拼接前端项目的域名（http://localhost:5173），导致请求指向前端本地而非Strapi后台。

正确写法 #

方法1：模板字符串动态拼接

在Vue模板中使用ES6模板字符串，将Strapi后台地址与图片相对路径拼接：

<div v-for="catalog in catalogs" :key="catalog.id">
  <p>{{ catalog.attributes.Title }}</p>
  <img :src="`http://localhost:1137${catalog.attributes.Cover.data.attributes.url}`" />
  <p>{{ catalog.attributes.createdAt }}</p>
</div>

• 必须使用:src（动态绑定），确保模板里的变量会被解析为实际值。
• 模板字符串用反引号`包裹，变量部分用${}嵌入。

方法2：统一管理Strapi基础地址

在组件中定义Strapi基础URL，方便后续维护：

// 组件的data选项
data() {
  return {
    strapiBaseUrl: 'http://localhost:1137'
  }
}

模板中调用：

<img :src="`${strapiBaseUrl}${catalog.attributes.Cover.data.attributes.url}`" />

方法3：配置Strapi返回完整URL

修改Strapi的config/server.js，添加url配置，让Strapi直接返回完整的图片地址：

module.exports = ({ env }) => ({
  host: env('HOST', '0.0.0.0'),
  port: env.int('PORT', 1137),
  app: {
    keys: env.array('APP_KEYS'),
  },
  url: 'http://localhost:1137', // 新增此配置
});

配置完成后重启Strapi，此时API返回的图片url就是完整地址，前端可直接使用原代码：

<img :src="catalog.attributes.Cover.data.attributes.url" />

你之前写法的错误分析 #

1. 第一种写法错误：在:src的字符串中直接嵌入变量名，没有用${}包裹，导致JavaScript无法识别变量，引发语法错误。
2. 第二种写法错误：没有使用:src动态绑定，整个URL被当作静态字符串，变量名不会被解析为实际路径。

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