我正在为摄影师构建一个简单的作品集网站。我尝试显示的集合类型称为宠物图片，其中包含标题和图像字段。我可以使用异步函数调用 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，就可以了。我在这里失去了理智!如果我遗漏了一些非常明显和令人尴尬的事情，我们深表歉意。
最佳答案
现在唯一的方法是将 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
关于strapi - 从 API (strapi) 访问图像 URL - 这可能吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66858826/