javascript - 在 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/` );
    }
},