Vuejs - 检查图片链接是否有效或损坏

20 浏览
0 Comments

Vuejs - 检查图片链接是否有效或损坏

这个问题和Angular 2 - 检查图像URL是否有效或损坏完全一样。我该如何在Vue.js中实现这个功能？

0

3 答案

0 Comments

Vue.js中检测图片URL是否有效或损坏的问题可能会出现的原因是在绑定图片URL时，如果URL对应的图片不存在或无法访问，将无法正确显示图片。这个问题可以通过设置一个替代图片的方法来解决，当URL无效时，可以将图片的src属性设置为替代图片的URL。

代码示例：

方法：

imageUrlAlt(event) {
    event.target.src = "alt-image.jpg";
}

这种方法可以通过在图片的错误事件上绑定替代图片的处理函数来实现。当图片URL无效时，将触发错误事件，然后在处理函数中将图片的src属性设置为替代图片的URL。

更优的解决方案是直接在图片标签中使用一个默认的替代图片URL作为属性绑定的初始值。

这种方法可以在绑定图片URL时，直接将默认的替代图片URL作为属性绑定的初始值，当URL无效时，自动替换为默认的替代图片URL。

另外，还有一种更符合Vue的方式是在替代图片的处理函数中直接更新数据，让Vue自动更新DOM。

imageUrlAlt(event) {
    this.imageUrl = 'alt-image.jpg';
}

这种方法通过更新数据，让Vue自动更新DOM，实现了替代图片的功能。

感谢大家宝贵的评论和建议。这个答案非常好，而且可以完全内联，没有太多杂乱的代码。

Company logo

这种方法可以在错误事件上直接设置图片的src属性，实现替代图片的效果。更符合Vue的方式是在替代图片的处理函数中直接更新数据，让Vue自动更新DOM。

this.image = 'alt-image.jpg';

通过更新数据，Vue会自动更新DOM，实现替代图片的功能。

0
0 Comments

问题的出现原因是：使用计算属性作为占位符URL的方式无法处理源URL存在但图片不存在（404）或无法访问（403）的情况。

解决方法是：使用Vue提供的标签的onerror事件来检测图片URL的有效性。

具体的解决方法如下：

<img :src="source" @error="handleImageError" />

methods: {

handleImageError(event) {

// 图片加载失败的处理逻辑

// 可以在这里修改source为占位符URL

}

}

通过在标签上绑定onerror事件，当图片加载失败时会触发handleImageError方法。在handleImageError方法中，可以编写处理图片加载失败的逻辑，比如将source修改为占位符URL。

这样就能够检测到图片URL的有效性，并在图片加载失败时进行相应的处理。

0
0 Comments

问题的出现原因：Vue.js提供了v-on:error事件来处理<img>元素加载错误的事件。这是一个Vue.js的语法糖，实际上是为了处理onerror事件，<img>元素可以触发这个事件。

解决方法：在<img>标签上添加:src属性绑定一个图片URL，然后使用v-on:error事件绑定一个方法来处理图片加载错误的情况。在这个方法中，可以进行一些错误处理的操作，比如输出错误信息到控制台。

具体实现代码如下：

这种方法同样适用于其他定义了src属性并加载资源的HTML元素，比如<audio>标签。

值得注意的是，onerror是一个有效的HTML事件，<img>元素可以触发这个事件。而v-on:error实际上是Vue.js为这个事件提供的语法糖，类似于为有效的HTML事件添加事件监听器的方式，比如<button v-on:click="clickHandler">、<input v-on:blur="blurHandler">等。

在Vue.js的官方文档中，并没有对v-on:error进行详细介绍，但在Mozilla开发者文档中有关于onerror事件的详细说明。

参考链接：

- Vue.js issue#3261: https://github.com/vuejs/vue/issues/3261#issuecomment-231933953

- onerror事件的说明：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Image_loading_errors

0