1

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);
    });      
}
GebetX
  • 11
  • 3
  • Related answers can also be found [here](https://stackoverflow.com/a/73264904/17865804), as well as [here](https://stackoverflow.com/a/73240097/17865804) and [here](https://stackoverflow.com/a/73726553/17865804). – Chris Nov 15 '22 at 06:43

0 Answers0