strapi - 从 API (strapi) 访问图像 URL - 这可能吗？

Question

我正在为摄影师构建一个简单的作品集网站。我尝试显示的集合类型称为宠物图片，其中包含标题和图像字段。我可以使用异步函数调用 API，但是一旦我从 API 获得 JSON 数据，我就无法访问照片的 URL。例如，我可以创建一个标题来显示每张宠物图片的标题，但我无法使用标准对象表示法访问 JSON 数据中的 URL，然后显示图像。这真的不可能吗？我有点失去理智了。

例如，采用如下所示的 JSON 数据数组:

{
    "id": 1,
    "Title": "Santa Dog Picture",
    "published_at": "2021-03-29T02:45:32.389Z",
    "created_at": "2021-03-29T02:45:23.362Z",
    "updated_at": "2021-03-29T02:45:32.414Z",
    "Photo": {
        "id": 3,
        "name": "Pets3.jpg",
        "alternativeText": "",
        "caption": "",
        "width": 4000,
        "height": 6000,
        "formats": {
            "thumbnail": {
                "name": "thumbnail_Pets3.jpg",
                "hash": "thumbnail_Pets3_a4be530d90",
                "ext": ".jpg",
                "mime": "image/jpeg",
                "width": 104,
                "height": 156,
                "size": 5.74,
                "path": null,
                "url": "/uploads/thumbnail_Pets3_a4be530d90.jpg"
            },
            "large": {
                "name": "large_Pets3.jpg",
                "hash": "large_Pets3_a4be530d90",
                "ext": ".jpg",
                "mime": "image/jpeg",
                "width": 667,
                "height": 1000,
                "size": 85.36,
                "path": null,
                "url": "/uploads/large_Pets3_a4be530d90.jpg"
            },
            "medium": {
                "name": "medium_Pets3.jpg",
                "hash": "medium_Pets3_a4be530d90",
                "ext": ".jpg",
                "mime": "image/jpeg",
                "width": 500,
                "height": 750,
                "size": 56.22,
                "path": null,
                "url": "/uploads/medium_Pets3_a4be530d90.jpg"
            },
            "small": {
                "name": "small_Pets3.jpg",
                "hash": "small_Pets3_a4be530d90",
                "ext": ".jpg",
                "mime": "image/jpeg",
                "width": 333,
                "height": 500,
                "size": 31.39,
                "path": null,
                "url": "/uploads/small_Pets3_a4be530d90.jpg"
            }
        },
        "hash": "Pets3_a4be530d90",
        "ext": ".jpg",
        "mime": "image/jpeg",
        "size": 2031.2,
        "url": "/uploads/Pets3_a4be530d90.jpg",
        "previewUrl": null,
        "provider": "local",
        "provider_metadata": null,
        "created_at": "2021-03-29T02:42:56.325Z",
        "updated_at": "2021-03-29T02:42:56.464Z"
    }
}

这不起作用:

const displayPhoto = async () => {
    const response = await fetch('/pet-pictures')
    const petPictures = await response.json()

console.log(petPictures)
const container = document.querySelector('#pets')


petPictures.forEach((picture) =>{
   
const photo = document.createElement('img')
photo.setAttribute('src', picture.Photo.formats.small.url)
container.appendChild(photo)

})

}

displayPhoto()

我收到类型错误:无法读取未定义的属性“格式”。但是，如果我用标题替换照片，并创建一个 h1 并将其文本内容设置为 picture.title，就可以了。我在这里失去了理智!如果我遗漏了一些非常明显和令人尴尬的事情，我们深表歉意。

Answer 1

现在唯一的方法是将 strapi 应用程序正在使用的 url 和端口添加到应用程序中的每个图像。例如，如果您在默认端口的本地开发环境中运行 strapi，则需要添加 localhost:1337 作为图像 url 的前缀。

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

您必须在 url 之前附加本地主机或域。因为 strapi 返回从“/uploads”开始的 url 路径

下面的代码模板应该可以帮助您:

const displayPhoto = async () => {
const response = await fetch('/pet-pictures')
const petPictures = await response.json()

console.log(petPictures)
const container = document.querySelector('#pets')
const api_url = "localhost:1337"; //Or domain name   

petPictures.forEach((picture) =>{
   
const photo = document.createElement('img')
photo.setAttribute('src', api_url + picture.Photo.formats.small.url)
container.appendChild(photo)

})

}

displayPhoto()

最后，我还认为使用外部服务(如 S3 form amazon 或 blob storage from azure)来上传静态文件是个好主意。这些服务上不存在此问题。我正在使用 azure blob 存储，而 strapi 正在使用正确的 url 保存文件。见下图

使用 Azure Blob 存储在响应上创建的 Url

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

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

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