在 Nuxt 前端使用 Strapi 上传的图片

Question

下面是我从 Strapi 公开的 API 数据。

http://myjson.com/1fgx71

我有一列post_content是 Markdown，我使用 WYSIWYG 编辑器上传了图片。现在上传的图像的路径为

/uploads/f8d87d8b6b1e41fe9ecd965078c57dc1.png

这是我的 Strapi 服务器上的路径，端口为 1337。

现在在我的 Nuxt 应用程序上，我尝试使用 VueShowDown 显示此内容，显然它会因为找不到文件而出错，因为 Nuxt 在端口 3000 上运行，并且 Nuxt 目录中没有文件，文件存储在 Strapi 服务器上。

在这种情况下，我如何显示存储在我前端的 Strapi 上的图像。

谢谢你。

Answer 1

嗨，您可以创建一个计算变量并在模板中显示之前替换所有 '/uploads/' 字符串，例如：

data() {
    return {
        strapi_url: 'https://url-from-your-strapi.com' 
    }
}, computed: {
    changed_post_content : function () {
        return post_content.split('/uploads/').join(`${this.strapi_url}/uploads/` );
    }
},