使用@sveltejs/enhanced-img处理动态图片URL时遇图片加载报错及输入框最后字符不显示问题求助
大家好,我在Svelte项目里用@sveltejs/enhanced-img的时候碰到了两个头疼的问题,想请教下有没有人遇到过类似情况或者知道怎么解决:
首先说下基础情况:我已经用npm install --save-dev @sveltejs/enhanced-img装了依赖,vite.config.js里的配置也反复检查过,路径应该是没问题的。
问题1:动态渲染图片时报错
我的项目里有个问题对象数组,每个对象都带图片URL,我想用enhanced:img来动态渲染这些图片,数据结构大概是这样:
const PERGUNTAS = [ { pergunta: 'question?', id: 'name', type: 'text', URLimagem: '/static/nome.jpg', // 第一次尝试:带/static/前缀 resposta: 'answer' }, { pergunta: 'question', id: 'nome', type: 'text', URLimagem: '/nome.jpg', // 第二次尝试:去掉/static/前缀 resposta: 'answer' }, ];
我试过带/static/和不带的两种路径写法,但只要用enhanced:img就会报错,换成标准的<img>标签图片就能正常加载。我还试过用import image from '/link/to/image.jpg?enhanced'的方式引入,结果还是一样。
控制台里的报错是:
Uncaught (in promise) TypeError: pergunta().URLimagem.img is undefined
我知道在用户输入正确答案之前,图片相关的状态应该是未定义的,但哪怕用户输入了正确答案,触发图片显示的时候,这个错误还是会出现。
组件里的图片渲染代码是:
<enhanced:img src={pergunta.URLimagem} alt="fantasma" class="fantasma" />
问题2:输入框动态显示答案时最后一个字符缺失
另外还有个奇怪的问题:我做了一个输入框,绑定了答案值,用户输入的时候动态显示答案,但每次输入完完整答案,最后一个字符总是不显示。比如答案是"answer",用户输完后页面上只显示"answe",感觉组件在最后一个字符输入前就停止更新了。
渲染逻辑说明
我是通过#each循环遍历问题数组,当前步骤匹配时渲染对应的表单片段:
{#each PERGUNTAS as pergunta, index (pergunta.id)} {#if etapa === index} {@render formulario(pergunta)} {/if} {/each}
对应的表单片段代码是:
{#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}
关键发现
最奇怪的是,只要我把enhanced:img换成普通的<img>标签,这两个问题就都消失了。
所以我现在有点困惑:是不是@sveltejs/enhanced-img本来就不支持这种动态绑定图片URL的场景?还是我哪里的写法或者配置漏了什么?麻烦大家帮我看看,谢谢!
备注:内容来源于stack exchange,提问作者Leonardo Cavalcante

