Home
Support Forums

Error after implementing Large Media

Need some help with this site: https://naughty-yalow-e19c7c.netlify.app

Just implemented Large Media, all my images are being tracked by LM, but now when I try to deploy, I get this error on all images:

./public/images/Kids-Yoga-Logo.png
11:32:13 AM: TypeError: unsupported file type: undefined (file: undefined)
11:32:13 AM:     at lookup (/opt/build/repo/node_modules/image-size/dist/index.js:51:11)
11:32:13 AM:     at Object.imageSize [as default] (/opt/build/repo/node_modules/image-size/dist/index.js:103:16)
11:32:13 AM:     at Object.getImageSize (/opt/build/repo/node_modules/next/dist/server/image-optimizer.js:663:56)
11:32:13 AM:     at /opt/build/repo/node_modules/next/dist/build/webpack/loaders/next-image-loader.js:38:85
11:32:13 AM:     at Span.traceAsyncFn (/opt/build/repo/node_modules/next/dist/trace/trace.js:74:26)
11:32:13 AM:     at /opt/build/repo/node_modules/next/dist/build/webpack/loaders/next-image-loader.js:38:47
11:32:13 AM:     at Span.traceAsyncFn (/opt/build/repo/node_modules/next/dist/trace/trace.js:74:26)
11:32:13 AM:     at Object.nextImageLoader (/opt/build/repo/node_modules/next/dist/build/webpack/loaders/next-image-loader.js:24:28)

Any suggestions?

If you’re using Netlify Large Media, this is expected. Files hosted in Netlify Large Media has not stored in your repo and thus the error. Basically, image processing would not be available for such files during the build time which is why we have image transformations during the runtime.

Do I need to reference the images in my code differently then? I’ve seen nothing in the docs on that.

You cannot call those image during build time, only runtime. This page would cover some parts of that: Transform images | Netlify Docs

Still not super clear on how to even reference local images in my code…

Simple answer, you can’t. As I have already said, those files don’t exist in your repo, so there’s no question about accessing them during build. In the HTML markup, you can reference those images just like any image that you add: <img src = "/foo/bar.jpg"/>.

Okay, but how do I know what the src is if the files don’t exist in my repo anymore?

It’s mentioned in the Large Media tab in your site settings.

Hmm. The Large Media tab says ‘No Assets Found’ but I’ve already followed the setup steps did the link step and configured which files to track… Any ideas?

Just confirming, have you done a git push and deployed your website at least once after doing that?

I have done a push, yes. But the deploy fails on build as I don’t have any assets to reference apparently.

Okay, they show in the assets area now, I went through the setup again, it said everything was already setup and tracked, so not sure if that helped solve the issue, but it is now resolved. Thanks for your help and suggestions!

1 Like

Thanks for coming back and letting us know! We appreciate you following up :slight_smile: