question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

No images were found to optimize although I use Image-component in code

See original GitHub issue

First of all thank you for your work on this. It is exactly what I need in my Next.js project in combination with a headless cms. Unfortunately I do have an issue I cannot resolve. I hope you can help me.

Describe the bug Although I use the Image component from next/image in my code I keep getting the ‘No images were found to optimize. (Maybe you never used the image component.)’ console log during next export. I noticed that there is also no file custom-optimized-images.nd.json in my .next folder. I suppose this is generated during next build.

To Reproduce Steps to reproduce the behavior:

  1. Use Image component in the code
  2. Build the app via next build (or BASE_PATH=staging npx env-cmd -f ./environments/.env.staging next build in my case)
  3. Export the app via next export and optimize image via next export && next-export-optimize-images
  4. Console log shows No images were found to optimize. (Maybe you never used the image component.) image

Expected behavior Find Image components and optimize used images from code.

Additional context I use the Image component like this: image The source of the image is an external url directly from the cms.

The first time I did a local build and export, I saw the external images were downloaded but after that I only see the above notification.

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:1
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
samuel-2018commented, Sep 26, 2022

@samuel-2018

Support for next/future/image has been added in ver. 1.9.0! Please try it out.

The ‘future’ version works. Thanks!

1reaction
wytzejancommented, Sep 26, 2022

@dc7290 thank you for your reply and sorry for my late reponse. I’ve used the package in a project but the project was in a hurry so at the end I did not use the package. I have tried it again with the version 1.9.0 but unfortunately I still get the same notice. I think it is an error at my end somewhere. Nevertheless, I will keep the code as it is right now because it is already in production. Maybe I need the package in the future; thanks for you work!

@samuel-2018 thanks for the heads up. I checked again but I was using the normal next/image import back then. I hope you can enjoy the package with the next/future/image in the latest version.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Optimize images during next build #19065 - GitHub
It is possible to use next/image with next/export by using a custom loader. next export with no image optimization. Alternatively, if you want ......
Read more >
Error: Do not use <img>. Use Image from 'next/image' instead.
js we have Image component, but the problem I have with it is that I can't use it as a normal HTML tag...
Read more >
Building an effective Image Component - Chrome Developers
# Image optimization issues and opportunities. Images not only affect performance, but also business. The number of images on a page was the ......
Read more >
Next.js automatic image optimization with next/image
Learn about automatic image optimization and how it can benefit developers with the native, game-changing, and powerful next/image API.
Read more >
Basic Features: Image Optimization - Next.js
These values are used to prevent Cumulative Layout Shift while your image is loading. import Image from 'next/image' import profilePic from ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found