在 Strapi 中访问图片 URL
2021-09-10
32576
我在从 Strapi 访问我的图片时遇到了一些严重的困难,我在这里遇到的所有内容都只是说在访问 URL 之前添加“http://localhost:1337”,但这对我来说不起作用。我非常困惑发生了什么,我也不明白为什么一开始访问它们这么困难?
// constants
const strapi = 'http://localhost:1337/posts'
const rootNode = document.getElementById('root');
const api_url = "http://localhost:1337"
function generateHTMLtemplate(data) {
// let url = JSON.stringify(data.image.formats.small.url)
// console.log(url)
// ^this returns "Cannot read properties of undefined (reading 'url')"
// console.log(api_url + url)
// ^this also returns "Cannot read properties of undefined (reading 'url')"
const { title, description } = data
return `
<div class="time-card-header">
<header class="time-card-header">
<div class="header-content">
<h4 class="timeline-title"><span class="badge">${title}</span></h4>
<p>${description}</p>
<div class="circle">
<img src=>
</div>
</div>
</header>
<div class="line"></div>
</div>
`
}
// render to the dom
function renderDataToTheDom(node, data) {
const html = data.map(item => generateHTMLtemplate(item)).join('')
console.log(html)
node.innerHTML = html
}
// renderDataToTheDom(root, [1,2,3])
async function getData(url) {
try {
const response = await fetch(url)
const data = await response.json();
renderDataToTheDom(root, data)
} catch (error){
console.log("error", error.message)
}
}
getData(strapi)
所以当我尝试访问
.url
时,我遇到了这个问题...
我非常感谢任何帮助,我也尝试过使用我看到有人建议的 S3 插件,但这也没有用,我宁愿让解决方案尽可能简单,因为这个网站非常简单
我的 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"
}
}
3个回答
我在获取 API 响应中的图像数据时遇到了问题。他们论坛上的 这个答案 很有帮助。
事实证明,Strapi 会自动过滤关系。 如果有人想知道,获取关系的方法是使用调用中的填充字段。
获取所有关系的示例:
GET: /api/books?populate=*
Tittoh
2021-12-15
我可以通过调用基本 URL 来解决这个问题:
http://localhost:1337 + review.attributes.FeaturedImage.data.attributes.formats.thumbnail.url
即 http://localhost:1337/uploads/thumbnail_food_logo_61b7e1b311.webp?width=379&height=379
Debuggingnightmare
2022-05-08
答案就在您的 json 响应中。您的响应中没有名为
Image
的键,而是名为
Photo
。因此,您需要做的就是访问
Photo.url
并将 url 附加到主机
localhost:1337/
。或者,如果您希望显示缩略图,则可以使用
Photo.formats.thumbnail.url
并将其附加到主机
localhost:1337
。
// constants
const strapi = 'http://localhost:1337/posts'
const rootNode = document.getElementById('root');
const api_url = "http://localhost:1337"
function generateHTMLtemplate(data) {
const { title, description, Photo } = data
return `
<div class="time-card-header">
<header class="time-card-header">
<div class="header-content">
<h4 class="timeline-title"><span class="badge">${title}</span></h4>
<p>${description}</p>
<div class="circle">
<img src="${api_url}/${Photo.url}"/>
</div>
</div>
</header>
<div class="line"></div>
</div>`
}
// render to the dom
function renderDataToTheDom(node, data) {
const html = data.map(item => generateHTMLtemplate(item)).join('')
console.log(html)
node.innerHTML = html
}
// renderDataToTheDom(root, [1,2,3])
async function getData(url) {
try {
const response = await fetch(url)
const data = await response.json();
renderDataToTheDom(root, data)
} catch (error){
console.log("error", error.message)
}
}
Salvino D'sa
2021-09-11