image的事件onerror问题?

作者站长头像
站长
· 阅读数 27
<template>
  <img :src="src" :style="imageStyle" :onerror="onError">
</template>

<script lang="ts">

import { defineComponent } from '@vue/composition-api'
import { string } from 'vue-types'

export default defineComponent({
  name: 'ApplicationIcon',
  props: {
    src: string().def('').isRequired,
    defaultImage: string().def('').isRequired
  },
  setup (props, { emit }) {
    const imageStyle = {
      backgroundRepeat: 'no-repeat',
      backgroundSize: 'contain'
    }

    // 图片加载失败回调
    const onError = () => {
      loading.value = false
      isLoadError.value = true
      // 如何拿到绑定的image对象
      // image.src = props.defaultImage
      // image.onerror = null
    }

    return {
      imageStyle,
      onError
    }
  }

})
</script>

<style lang="scss" scoped>
</style>

如代码,我想使用img标签和onerror方法使得图片加载失败的时候可以有默认图片,但是我在onerror方法中拿不到image对象,请问我该怎么做?

回复
1个回答
avatar
test
2024-07-03
<template>
  <img ref="imageRef" :src="src" :style="imageStyle" @error="onError">
</template>

<script lang="ts">
import { defineComponent, ref } from '@vue/composition-api'
import { string } from 'vue-types'

export default defineComponent({
  name: 'ApplicationIcon',
  props: {
    src: string().def('').isRequired,
    defaultImage: string().def('').isRequired
  },
  setup (props) {
    const imageRef = ref(null)
    const imageStyle = {
      backgroundRepeat: 'no-repeat',
      backgroundSize: 'contain'
    }

    // 图片加载失败回调
    const onError = () => {
      if (imageRef.value) {
        imageRef.value.src = props.defaultImage
        imageRef.value.onerror = null
      }
    }

    return {
      imageRef,
      imageStyle,
      onError
    }
  }
})
</script>
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容