Question

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

我有一个列post_content，这是一个降价促销，我已使用所见即所得编辑器在其中上传了图片。现在上传的图片的路径为

/uploads/f8d87d8b6b1e41fe9ecd965078c57dc1.png

这是我的Strapi服务器上具有1337端口的路径。

现在在我的Nuxt应用程序上，我尝试使用VueShowDown显示此内容，显然由于未在Nuxt的端口3000上运行，并且未在Nuxt目录中存在文件，并且文件存储在trapi服务器上，未找到文件，它会给出错误。 / p>

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

谢谢。

Answer 1

目前唯一的方法是将vide应用程序使用的URL和端口添加到vue应用程序中的每个图像。例如，如果您在本地开发环境中的默认端口上运行trapi，则需要添加localhost：1337作为前缀进行测试。

原因是您使用默认的方式在应用程序中上传图片，并且stradi保存了没有域名的网址。

我认为您可以在trapi存储库上创建问题，并指定是要尝试将其作为问题还是作为增强功能。

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

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

Answer 2

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

exportToExcel("Some Title",mygridview, new List<int>{3, 4, 5});

Answer 3

首先，您需要从trapi中获取post_content或axios之类的opolo并将其另存为数据。在created(){},中编写函数，图像的网址类似于post_content.image.url，如果您编写

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

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

Answer 4

要在trapi的前端显示图像，您只需执行以下四个操作之一即可：

%env MY_VAR MY_VALUE或

.env或

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

<img :src="

用查询名称替换示例，例如post_comment.image.url

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