img 当图片加载失败时显示默认图片
时间: 2023-08-03 09:04:42 浏览: 71
可以使用以下代码来实现:
```
<img src="image.jpg" onerror="this.src='default.jpg'">
```
这里,`src` 属性指定了图片的路径,如果图片加载失败,`onerror` 事件会触发,将 `src` 属性赋值为默认图片路径,即显示默认图片。
相关问题
img标签怎么设置加载失败时显示的图片
可以使用 `onerror` 事件来捕获图片加载失败的情况,并设置一个默认的图片来代替加载失败的图片。
示例代码如下:
```html
<img src="image.jpg" onerror="this.onerror=null;this.src='default.jpg';">
```
在上面的示例中,当图片加载失败时,会触发 `onerror` 事件,然后将 `src` 属性设置为 `default.jpg`,这样就会显示默认的图片。注意,为了避免出现死循环,需要在 `onerror` 事件中将 `onerror` 属性设为 `null`,这样就不会再次触发 `onerror` 事件。
uniapp 在图片加载好之前展示默认图片
在 UniApp 中,你可以通过使用 `lazy-load` 属性和 `error` 事件来实现在图片加载完成之前展示默认图片的效果。
首先,你可以在 `img` 标签上添加 `lazy-load` 属性,这样图片会在进入可视区域时自动加载。然后,在 `img` 标签上添加 `@error` 事件监听图片加载失败的情况。
接下来,你可以在组件的 `data` 中定义一个默认图片的路径,例如:
```javascript
data() {
return {
defaultImage: '默认图片路径'
}
}
```
然后,在 `img` 标签中使用条件渲染来判断是否加载成功,如果加载失败则显示默认图片,例如:
```html
<template>
<img :src="imageSrc" @error="handleError" lazy-load />
</template>
```
```javascript
data() {
return {
defaultImage: '默认图片路径',
imageSrc: '实际图片路径'
}
},
methods: {
handleError() {
this.imageSrc = this.defaultImage;
}
}
```
这样,如果图片加载失败,`@error` 事件会触发 `handleError` 方法,将 `imageSrc` 修改为默认图片的路径,从而展示默认图片。
希望能帮到你!如果有任何疑问,请随时提问。