Vuetify: [Vuetify] Failed to decode image, trying to render anyway

[ferchoslim]

hello, this is the warning that i'm facing... how can i fix this.

[Vuetify] Failed to decode image, trying to render anyway

src: https://cdn.shopify.com/s/files/1/0064/1486/0406/products/moda-dulce-jeans-levanta-cola-colombianos-front1-600x-800.png
Original error: The source image cannot be decoded.

found in

---> <VImg>... (1 recursive calls)
       <VCarouselItem>
         <VCarousel>
           <VCard>
             <CatalogCard> at src\components\Card.vue
               <Catalog> at src\views\Catalog.vue
                 <VContent>
                   <VApp>
                     <App> at src\App.vue
                       <Root>

[KaelWD]

Unable to reproduce, please open a new issue with all the required information.

Please only create issues with the provided issue creator. In the boilerplate for creating an issue, it explains that any ticket made without this will be automatically closed. Thank you.

[bunny-akbar]

You are probably rendering raw images from your storage location to your DOM. These images are rendered with their raw pixel data. For example, if you have an image of aspect ratio 16:9 or 1280*720, its equivalent size in pixels will be 921,600. Hence, the size of this image on your DOM will be calculated to be about 70mb on render. This is because each pixel takes 1 byte in the memory. You can check this out in your chrome task manager after loading your images on the page (Chrome Settings > More Tools > Task Manager). Images or any media of this size, should not be rendered on the DOM directly as you end up wasting lot of client resources. There are 2 possible solutions to this as of my knowledge. One is to stream the images to your DOM instead of direct render. The other is to create thumbnails of your original images and storing these in a directory. Render these thumbnails instead of the raw image and you can open the original image if the user clicks on the thumbnail. It is a common practice to use the thumbnail approach. Also, the third possible way is to compress the image before upload. This is better done on your backend because if you do it at the client side, you will be doing it at an expense of client resources (battery, memory, processor). You definitely don't want any app to be draining your battery or slowing your system.

[builder7777]

@bunny-akbar Thanks! that was actually the problem - images were too large

[shidoitsuka]

@bunny-akbar thanks!