我被一个问题卡住了,我找不到一种方法来处理。请帮助。我正在使用VueJs构建一个前台,我对Strapi管理的后台进行了一些API调用。字符串内容类型一切正常,但当我试图获得图像响应时,我无法处理好的URL来显示我的图像。
下面是我的HTML代码:
<div v-for="catalog in catalogs" :key="catalog.id">
<p>{{ catalog.attributes.Title }}</p>
<img :src="catalog.attributes.Cover.data.attributes.url" />
<p>{{ catalog.attributes.createdAt }}</p>
</div>
下面是我的JSON:
{
"data": [
{
"id": 1,
"attributes": {
"Title": "Catalogue Général 2023",
"createdAt": "2023-03-16T10:18:57.910Z",
"updatedAt": "2023-03-16T10:48:13.184Z",
"publishedAt": "2023-03-16T10:48:13.182Z",
"Cover": {
"data": {
"id": 2,
"attributes": {
"name": "Canson-Fine-Art---Graphic-arts-XLbristol.jpg",
"alternativeText": null,
"caption": null,
"width": 800,
"height": 800,
"formats": {
"thumbnail": {
"name": "thumbnail_Canson-Fine-Art---Graphic-arts-XLbristol.jpg",
"hash": "thumbnail_Canson_Fine_Art_Graphic_arts_X_Lbristol_ff19217886",
"ext": ".jpg",
"mime": "image/jpeg",
"path": null,
"width": 156,
"height": 156,
"size": 7.77,
"url": "/uploads/thumbnail_Canson_Fine_Art_Graphic_arts_X_Lbristol_ff19217886.jpg"
},
"small": {
"name": "small_Canson-Fine-Art---Graphic-arts-XLbristol.jpg",
"hash": "small_Canson_Fine_Art_Graphic_arts_X_Lbristol_ff19217886",
"ext": ".jpg",
"mime": "image/jpeg",
"path": null,
"width": 500,
"height": 500,
"size": 49.98,
"url": "/uploads/small_Canson_Fine_Art_Graphic_arts_X_Lbristol_ff19217886.jpg"
},
"medium": {
"name": "medium_Canson-Fine-Art---Graphic-arts-XLbristol.jpg",
"hash": "medium_Canson_Fine_Art_Graphic_arts_X_Lbristol_ff19217886",
"ext": ".jpg",
"mime": "image/jpeg",
"path": null,
"width": 750,
"height": 750,
"size": 91.45,
"url": "/uploads/medium_Canson_Fine_Art_Graphic_arts_X_Lbristol_ff19217886.jpg"
}
},
"hash": "Canson_Fine_Art_Graphic_arts_X_Lbristol_ff19217886",
"ext": ".jpg",
"mime": "image/jpeg",
"size": 87.49,
"url": "/uploads/Canson_Fine_Art_Graphic_arts_X_Lbristol_ff19217886.jpg",
"previewUrl": null,
"provider": "local",
"provider_metadata": null,
"createdAt": "2023-03-16T10:45:27.903Z",
"updatedAt": "2023-03-16T10:45:27.903Z"
}
}
}
}
}
],
"meta": {
"pagination": {
"page": 1,
"pageSize": 25,
"pageCount": 1,
"total": 1
}
}
}
在我的Json Answer中,我得到了正确的文件名。但这里是在我的控制台中发送的URL。:
http://localhost:5173/uploads/Canson_Fine_Art_Graphic_arts_X_Lbristol_ff19217886.jpg
这个URL指向我的前台文件夹中的一个文件,但该文件实际上存储在我的Strapi后台。我正在寻找一种方法来更改图像源中的此URL,使其指向我的Strapi Back。任何线索?
谢谢你,
我已经试过了:
<img :src="http://localhost:1137/catalog.attributes.Cover.data.attributes.url" />
这个版本给我发来500内部错误,说语法错误。
还有这个
<img src="http://localhost:1137/catalog.attributes.Cover.data.attributes.url" />
将URL作为完整的字符串读取
1条答案
按热度按时间fdbelqdn1#
好的。在以下帮助下找到答案:Using Images uploaded on Strapi on Nuxt front end
我有一个语法错误,这是阻止我的代码工作,所以我已经改变了代码,并打破了链接这里是很好的答案: