vue3 中v-for循环@/路径图片无法显示

这可能是因为在 Vue 3 中，模板表达式（如 v-for 中的变量）默认是只读的，不能修改。因此，如果你在 v-for 中使用了相对路径，可能会导致图片无法显示。

解决这个问题的方法是使用 require() 函数将相对路径转换为绝对路径。例如：

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

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

在上面的代码中，我们使用 require() 函数将相对路径转换为绝对路径，从而确保图片可以正确显示。

相关问题

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>

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

vue3v-for循环图片

在Vue3中，如果你想要通过`v-for`循环显示一组图片，你可以这样做：

<template>
  <div class="image-container">
    <ul>
      <li v-for="(item, index) in images" :key="index">
        <img :src="item.src" alt="Image {{index + 1}}"/>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { src: 'path/to/image1.jpg' },
        { src: 'path/to/image2.jpg' },
        // 更多图片...
      ]
    }
  }
}
</script>

<style scoped>
.image-container {
  /* 根据需求添加样式 */
}
</style>

在这个例子中，`images`数组存储了图片的URL路径。`v-for`指令遍历这个数组，为每一个元素创建一个新的列表项，并插入一个`<img>`标签，其`src`属性绑定到当前迭代的图片路径。