I am trying to download multiple images from a FastAPI server via Vuetify frontend to display on cards but the images are not loading or displaying. It gives this error: "Image load failed" The filename properties were loaded. I am not sure why the images are not loading or read properly.
DOWNOAD_PATH = "imgSearch"
def download(file_path):
if os.path.isfile(file_path):
return FileResponse(path=file_path, media_type="image/jpg", filename=os.path.basename(file_path))
return None
@router.get('/img/download')
async def download_images():
lsImages = []
i = 0
for imgFilename in os.listdir(DOWNOAD_PATH):
lsImages.append(download(os.path.join(DOWNOAD_PATH, imgFilename)))
print("Image: " + imgFilename) ; i = i + 1
if lsImages: return lsImages
return {"error" : "File not found!"}
<v-card>
<v-subheader>Output Images</v-subheader>
<v-container fluid grid-list-md >
<v-layout row wrap>
<v-flex
v-for="card0 in cards"
:key="card0.title"
v-bind="{ [`xs${card0.flex}`]: true }"
>
<v-card elevation="10">
<v-img
:src="card0.src"
height="175px"
>
</v-img>
<v-card-title class="text-h6" v-text="card0.title"></v-card-title>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-card>
onUploadSelectedFileClick () {
axios({
method: 'get',
url: `${apiUrl}/api/v1/img/download`,
responseType: 'stream'
})
.then(response => {
const imgSearches = response.data;
let i = 0
var jInput = this.iInput * 4;
for (const file of imgSearches) {
if (jInput > i) {
Vue.set(this.cards, i, {title: file.filename, src: file.path, flex: 3 });
i++
}
};
})
.catch(error => {
console.error(error);
});
}