enhanced:img not working at all for me

[StokleyO]

Hey everyone,

I've recently begun attempting to use Svelte's new enhanced:img feature as described here (https://kit.svelte.dev/docs/images#sveltejs-enhanced-img), however, I am not getting the desired results. After running the function to install @sveltejs/enhanced-img and adding enhancedImages to my vite.config.js file, anytime I try to use the <enhanced:img /> tag, I get an error saying 'Cannot read properties of undefined (reading 'src')'. Then also, when I try to add ?enhanced to the end of my dynamic photo import, I get an error that says no such file exists and then it shows me the exact path to get to the file. Anyone been able to implement this successfully yet? The specific image here is a png file. And I'm using SvelteKit 1.20.4 and Svelte 4

[benmccann]

@StokleyO there's not enough information here to tell where things might be going wrong. Can you share a repository that reproduces the error?

[StokleyO]

@benmccann this is what it looks like without enhanced:img

[saschakrueger]

@benmccann thanks for looking into this. Updating to ^0.1.7 indeed fixed it kind of for me.

  <enhanced:img 
   src='/src/lib/assets/images/hero.jpg'
   sizes="(min-width:1920px) 1280px, (min-width:1080px) 640px, (min-width:768px) 400px"
   alt={alt} 
  />

works, but if I use something like src={'/src/lib/assets/images/' + scr} where src is a prop of my component, I receive a server error 500.

<img src={'/src/lib/assets/images/' + scr} alt={alt} /> does work though.

@StokleyO : This looks rather like an issue with your css. You probably used an img-tag for your temporary fix, but now enhanced:img will generate a picture-tag for you.
Try to set height: auto; on the img-tag.

[StokleyO]

@saschakrueger you are correct, setting height: auto; resolves the issue. One last question, the image looks a bit too low quality on large & xl screens. can I set a custom width for those screen sizes in css?

[saschakrueger]

@StokleyO this is exactly what sizes="(min-width:1920px) 1280px, (min-width:1080px) 640px, (min-width:768px) 400px" is for. Within a picture tag it will use different size images for different screen sizes. Above the largest image would be 1280px wide at a screen size of minimum 1920px. You could easily increase the values as needed, but keep in mind that that will also increase the load time of your app. Using modern formats like webp and avif will help to keep files small, even if you have rather large images.

[StokleyO]

@saschakrueger perfect!! thank you so much Sascha, you were a huge help. Thank you @benmccann as well

[victoriusnet]

@saschakrueger have you managed to solve the prop src issue?

I'm struggling with the same, reported here:
#11535

Thank you!

[benmccann]

You were using the wrong syntax. I replied in the issue

[Florinstruct]

After 10+ different errors I'll just remove this and stick to optimizing assets myself. This does not seem like a stable, production-ready tool right now.

[xdeus]

It seems dynamically importing images for <enhanced:img /> tag has very limited functionality. If you import an image, consider to use if condition before using the image in the html as below:

<script> import image from 'path-to-image/image.jpg?enhanced'; </script>
// ?enhanced query is must

{# if image !== undefined }
<enhanced:img src={image} />
{/if}

This worked for me. But it is best to use static images directly on enhanced:img tag, because it allows setting the dimensions of the image and you get the actual resized images. Using css to adjust width and height doesn't seemed to actually resize the image.

It happened in my case, you may directly check yourself. Do let us know what have you discovered.

[eltigerchino]

As a build plugin, @sveltejs/enhanced-img can only optimize files located on your machine during the build process. If you have an image located elsewhere (such as a path served from your database, CMS, or backend), please read about loading images dynamically from a CDN.

#11535 (comment)