Image Trace double rendering and not replacing traced image

[BrandonKlotz]

This may totally be a misunderstanding of the setup but I was trying to implement images loading with an SVG trace and then being replaced with the png image.

// index.js
import Head from 'next/head'
import planet from '../public/planet-1.png?trace'

export default function Home() {
  return (
    <div>
      Hello world
      <div className="w-96 h-auto">
         <img src={planet.trace} />
         <img src={planet.src} />
      </div>
    </div>
  )
}

// next.config.js

const withOptimizedImages = require('next-optimized-images');

module.exports = withOptimizedImages({
  optimizeImagesInDev: true
});

Actual Result

Am I totally missing something? 🤣

Link to full repo:

https://github.com/BrandonKlotz/next-optimized-images-demo

[BrandonKlotz]

Made a small wrapper package to achieve what I was hoping for. Still curious why it wasn't working here.

https://github.com/BrandonKlotz/next-image-trace-loader

[Vit Bokisch]

@BrandonKlotz Well, you get both variants at the same time (original and trace) during compilation, and then you just render them both at the same time. That's why you see both of them. You miss either a condition to render only one of your images or in your component or you can replace it with your own hook to detect if the image is loaded, like this:

useEffect(() => {
      const originalImage = new Image()
      originalImage.src = src.original
      originalImage.onload = () => {
        setLoaded(true)
      }
    }, [src])

Hope it helps :)

[BrandonKlotz]

Going to close this as a today I learned 😄