vue2 本地图片for循环出不来

您好！对于在Vue 2中循环渲染本地图片的问题，您可以尝试以下步骤：

1. 确保您已经在Vue组件中正确引入了本地图片。您可以使用`require`来引入本地图片，例如：

<template>
  <div>
    <img v-for="image in images" :src="require(`@/assets/${image}`)" :key="image" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: ['image1.jpg', 'image2.jpg', 'image3.jpg']
    };
  }
};
</script>

在上述示例中，假设您的图片存放在`src/assets/`目录下，`images`数组包含了要循环渲染的图片文件名。

2. 确保图片文件名的大小写与实际文件名一致。在某些操作系统上，文件名是区分大小写的。

3. 如果您使用的是Vue CLI创建的项目，并且在开发环境下仍然无法正确显示图片，可以尝试重新启动开发服务器。有时候，在添加新的静态资源后，开发服务器需要重新扫描并更新文件。

希望这些信息对您有所帮助！如果还有其他问题，请随时提问。

相关问题

vue使用v-for循环本地图片时图片不显示

可能是图片路径不正确或不完整导致的。请确保图片路径是正确的，并且是相对于项目根目录的。另外，您还可以尝试使用require语法来加载图片，例如：

<template>
  <div>
    <img v-for="img in images" :src="require(`@/assets/images/${img}`)" alt="">
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: ['image1.jpg', 'image2.jpg', 'image3.jpg']
    }
  }
}
</script>

此外，还要确保图片文件名的大小写与代码中的完全匹配。如果仍然无法解决问题，请提供更多的代码和详细的错误信息以便我们更好地帮助您解决问题。

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')`。