You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

使用@sveltejs/enhanced-img处理动态图片URL时遇图片加载报错及输入框最后字符不显示问题求助

@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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.14 16:58:02