Asset not inlined comments

[bronze]

Hi there.

I'm using vite-imagetools to add other image formats on a page, importing the images in the JS. When building, my html ends up with several commented lines like these:

<!-- ASSET NOT INLINED: assets/image.9e86b0ad.avif -->
<!-- ASSET NOT INLINED: assets/image.8317db15.webp -->

Is there a way to avoid this output?

cheers!

[richardtallent]

Hi,

Are the images actually being bundled, or not?

That comment should only appear if the asset isn't being bundled into the HTML.

[bronze]

Dont know how to answer your question, sorry. I just call them on the .js with:

// import 3 different sizes of the image and create a srcset from them
import srcsetAvif from './img/image.jpg?w=500;640;768;1024;1200;1366;1600;1920&avif&srcset'
// do it a second time, but now as webp since safari can't display avif
import srcsetWebp from './img/image.jpg?w=500;640;768;1024;1200;1366;1600;1920&webp&srcset'
import srcsetJpg from './img/image.jpg?w=500;640;768;1024;1200;1366;1600;1920&jpg&srcset'
// create a small placeholder and import its metadata
import { src as placeholder, width, height } from './img/image.jpg?width=600&blur=30&quality=50&metadata'

// lets try rushing LCP
document.body.style.background = `#000000 url(${placeholder}) no-repeat center center / cover`

document.querySelector('#background').innerHTML = `
  <picture>
    <source scrset="${srcsetAvif}" type="image/avif"/>
    <source srcset="${srcsetWebp}" type="image/webp"/>
    <source srcset="${srcsetJpg}" type="image/jpg"/>
    <img
        src="${placeholder}"
        width="${width}"
        height="${height}"
        alt="Laptop in the dark." />
  </picture>
`

[bronze]

ive found what was messing up. i was using the minimy html plugin alongside singlefile and the js wasnt being inlined, throwing the errors. after switching the order on vite.config.js, all is well.

ty and sorry for the bother