vue for循环时 使用require动态路径图片不存在怎么使用默认图片

可以在v-bind中使用三元表达式，判断当前图片是否存在，若不存在则使用默认图片路径。示例代码如下：

<template>
  <div>
    <div v-for="(item, index) in imgList" :key="index">
      <img :src="item.imgUrl ? require(`@/assets/${item.imgUrl}`) : require('@/assets/defaultImg.png')" alt="图片">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgList: [
        { imgUrl: 'img1.png' },
        { imgUrl: 'img2.png' },
        { imgUrl: '' }
      ]
    }
  }
}
</script>

以上代码中，`imgUrl`为空字符串时，会使用默认图片路径`require('@/assets/defaultImg.png')`。

相关问题

vue for循环时 使用require动态路径本地图片不存在怎么使用默认图片

可以在v-bind中使用三元表达式，判断当前图片是否存在，若不存在则使用默认图片路径。示例代码如下：

<template>
  <div>
    <div v-for="(item, index) in imgList" :key="index">
      <img :src="getImageUrl(item.imgUrl)" alt="图片">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgList: [
        { imgUrl: 'img1.png' },
        { imgUrl: 'img2.png' },
        { imgUrl: '' }
      ]
    }
  },
  methods: {
    getImageUrl(url) {
      try {
        return require(`@/assets/${url}`);
      } catch (error) {
        return require('@/assets/defaultImg.png');
      }
    }
  }
}
</script>

以上代码中，`getImageUrl`方法会尝试获取图片路径`require(`@/assets/${url}`)`，若图片不存在则会捕获异常，返回默认图片路径`require('@/assets/defaultImg.png')`。

vue for循环时require动态路径图片不存怎么使用默认图片

在 Vue 的 `v-for` 循环中，如果动态路径的图片不存在，可以使用 `v-on:error` 监听图片加载错误事件，然后在事件处理函数中设置一个默认图片的路径，例如：

<template>
  <div>
    <img v-for="(image, index) in images"
         :key="index"
         :src="image.src"
         @error="handleImageError(image)">
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { src: 'path/to/image1.png' },
        { src: 'path/to/image2.png' },
        { src: 'path/to/missing-image.png' },
        { src: 'path/to/image3.png' }
      ],
      defaultImage: 'path/to/default-image.png'
    }
  },
  methods: {
    handleImageError(image) {
      image.src = this.defaultImage;
    }
  }
}
</script>

在上面的示例中，如果图片加载失败，`handleImageError` 方法会将图片的路径设置为默认图片的路径。这样就能够在图片不存在时使用默认图片了。