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

Question

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

http://myjson.com/1fgx71

我有一个专栏 post_content 这是一个降价，我已经使用 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/` );
    }
},

Answer 2

目前唯一的方法是在你的 vue 应用中的每张图片中添加你的 Strapi 应用正在使用的 url 和端口。例如，如果您在默认端口的本地开发环境中运行 Strapi，则需要添加 localhost:1337 作为前缀进行测试。

原因是您在应用中使用默认方式上传图片，而strapi保存没有域的url。

我认为您可以在 Strapi 存储库上创建一个问题，并指定您是想将其作为问题还是作为增强来尝试。

最后，我也认为使用外部服务（如亚马逊的 S3 或 azure 的 blob 存储）上传静态文件是个好主意。这些服务不存在此问题。我正在使用 azure blob 存储，而strapi 正在使用正确的 url 保存文件。见下图

Url created on a response using azure blob storage

这里是您可以用于您的项目的提供商列表，请记住唯一官方支持的包是 AWS。

https://www.npmjs.com/search?q=strapi-provider-upload-

https://strapi.io/documentation/developer-docs/latest/development/plugins/upload.html#upload

Answer 3

首先你需要从strapi 获取post_content 和axios 或opolo 之类的东西，并将其作为数据保存在你的前端。在created(){}, 中写下你的函数图像中的 url 将类似于post_content.image.url 然后如果你写

<img :src=`https://www.example.com${post_content.image.url} + ` />

您将获得未定义的 url，因为 nuxt 是服务器端渲染，您必须在您的 img 标签中添加 v-if:"post_content.image" 属性，以便 nuxt 等待图像加载然后读取其 url 祝你好运；）

Answer 4

要在strapi的前端显示图像，您可以简单地执行以下四个操作之一：

<img :src="api_url + example.image.url" alt="" /> 或

<img :src="api_url + example.image[0].url" alt="" /> 或

<img :src="http://localhost:1337 + example.image.url" alt="" /> 或

<img :src="`https://www.example.com` + example.image.url" alt="" />

将 example 替换为您的查询名称，例如 post_comment.image.url

我在使用 Gridsome 和 Nuxtjs 时都遇到了这个问题，并且在任何地方都找不到帮助，现在我可以在我建立的各种网站上使用它。我在分享知识。祝你好运