Svelte 在事件触发器上访问当前元素

Question

我在使用this关键字访问元素值时遇到问题。

这就是我所拥有的（不起作用）

{#if item}  
  <img src={'http://example.com/'+item.profile_img}
       on:error={this.src='/public/unknown.svg'}
       alt="user" />
{/if}

如果图像不存在，我想使用'/public/unknown.svg'并将错误设置为null 。 我不明白为什么this关键字undefined ，正常的onerror方法也不起作用。

这是我想在 svelte 中实现的普通 HTML 版本。

<img src="http://example.com/non-existent-image.jpg"
     onerror="this.onerror=null;this.src='http://example.com/existent-image.jpg';" />

我试过各种方法都失败了，请帮忙。

Answer 1

像这样使用和内联 function 并获取目标然后设置 src

{#if item}  
  <img src={'http://example.com/'+item.profile_img}
       on:error={(e) => {
           e.target.src='/public/unknown.svg'
       }}
       alt="user" />
{/if}

或者，如果您更喜欢使用它，则需要使用function才能访问正确的当前标签

{#if item}  
  <img src={'http://example.com/'+item.profile_img}
       on:error={function() {
           this.src='/public/unknown.svg'
       }}
       alt="user" />
{/if}

阅读更多关于箭头功能和这个