Next.js Discord

Discord Forum

Can't import (animated) AVIF as Image

Brown bear posted this in #help-forum
Open in Discord
Brown bearOP
When trying to import an AVIF as an Image like so:

import animated from "../../public/a/animated.avif";

im getting the following error:

Error: Image import "../../public/a/animated.avif" is not a valid image file. The image may be corrupted or an unsupported format.

Is AVIF not supported by the Image module and if so is there a way to get around this? I tried adding this to my

module.exports = {
    images: {
        formats: ['image/avif', 'image/webp'],

But I assume this is just so the app converts/serves images as AVIF, not for importing?

Converting my video to AVIF yielded infinitely better results in terms of noise compared to webp so id like to avoid that format.

1 Reply

Brown bearOP
From the documentation it reads like it should be supported, so I don't know what I might be missing:
"If src is an object from a static import and the imported image is .jpg, .png, .webp, or .avif, then blurDataURL will be automatically populated, except when the image is detected to be animated."