vue.js Bad Link on strapi Image URL

v440hwme  于 2023-03-24  发布在  Vue.js
关注(0)|答案(1)|浏览(171)

我被一个问题卡住了,我找不到一种方法来处理。请帮助。我正在使用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作为完整的字符串读取

fdbelqdn

fdbelqdn1#

好的。在以下帮助下找到答案:Using Images uploaded on Strapi on Nuxt front end
我有一个语法错误,这是阻止我的代码工作,所以我已经改变了代码,并打破了链接这里是很好的答案:

<img :src="`http://localhost:1337` + catalog.attributes.Cover.data.attributes.url" alt="" />

相关问题