"Uncaught (in promise) TypeError: ...img is undefined" when using @sveltejs/enhanced-img with dynamic image URLs

I'm encountering an issue using @sveltejs/enhanced-img in my Svelte project. I've installed it via npm install --save-dev @sveltejs/enhanced-img and configured it in vite.config.js.

My setup involves an array of question objects, each containing an image URL. I'm trying to dynamically render these images using enhanced:img.

Here are examples of how I'm structuring my data:

const PERGUNTAS = [{    pergunta: 'question?',    id: 'name',    type: 'text',    URLimagem: '/static/nome.jpg', // First attempt: with /static/    resposta: 'answer'},{    pergunta: 'question',    id: 'nome',    type: 'text',    URLimagem: '/nome.jpg', // Second attempt: without /static/    resposta: 'answer'},

I've tried both including /static/ in the path and omitting it. When I remove the enhanced:img tag and just use a standard tag, the images load correctly.

I've also attempted using the import syntax with the ?enhanced query parameter, like this: import image from '/link/to/image.jpg?enhanced', but I get the same result.

The error I'm consistently getting in the console is:

Uncaught (in promise) TypeError: pergunta().URLimagem.img is undefined

This error suggests that pergunta().URLimagem.img is undefined. I understand that the image should be undefined initially until the user provides the correct answer in the input field. The problem is that even after providing the correct answer, which should trigger the image display, I still receive this error.

Here's the relevant part of my Svelte component:

<enhanced:img src={pergunta.URLimagem} alt="fantasma" class="fantasma" />

My vite.config.js is configured correctly (I've double-checked the paths).

In addition to the image issue, I'm also experiencing a problem with the dynamic rendering of the answer text. The answer is displayed dynamically as the user types. However, when the user finishes typing the complete answer, the last letter is missing. For example, if the answer is "answer", it only displays "answe". This indicates that the component stops updating before rendering the final character.

Crucially, I've discovered that both problems are resolved when I remove the enhanced:img tag and use a standard tag.

Additionally I'm rendering the form with:

 {#each PERGUNTAS as pergunta, index (pergunta.id)}  {#if etapa === index}    {@render formulario(pergunta)}  {/if}{/each}

and the relevant part of my form is:

{#snippet formulario(pergunta)}<enhanced:img src={pergunta.URLimagem} alt="fantasma" class="fantasma" /><input type={pergunta.type} id="name" class="input" bind:value={respostas[pergunta.id]} />{/snippet}

Is @sveltejs/enhanced-img not designed to handle dynamic image URLs in this way? Or am I missing something obvious? Any help would be greatly appreciated.