使用 v-for [重复] 动态显示图片

Question

我试图通过使用v-for-directive 来显示我的 src/assets/images 文件夹中的一些 JPG 图片，但不知何故浏览器找不到它们。奇怪的是，如果我手动召唤具有相同坐标的图片，它就可以工作。您可以在下面找到重现它的代码。 Screenshot of Page.

<template>
  <div>
    <h2>Success</h2>
    <img src="@/assets/images/1.jpg" width="10%" />
    <img src="@/assets/images/2.jpg" width="10%" />

    <h2>Failure</h2>
    <img
      v-for="(image, i) in images"
      :src="image.url"
      :key="i"
      @click="showProp(image.url, i)"
      width="10%"
    />
  </div>
</template>
<script>
export default {
  methods: {
    showProp: function (url, i) {
      console.log(url, " and ", i);
    },
  },
  data() {
    return {
      images: [
        { url: "@/assets/images/1.jpg" },
        { url: "@/assets/images/2.jpg" },
      ],
    };
  },
};
</script>
<style scoped>
h2 {
  padding: 30px;
}
</style>

当我在浏览器中点击破碎的图片时，先左图后右图，控制台显示：

@/assets/images/1.jpg  and  0
@/assets/images/2.jpg  and  1

我尝试了什么？

• 尝试查找以前的 Stack Overflow 帖子 [1,2] 是否能够解决我的问题
• 不同的路径语法（@/assets/ OR ../assets/）
• 摆脱美学
• 强制 image.url 与 String(image.url) 类型匹配

1：Vue.js image v-for bind
2：How to reference static assets within vue javascript

备注：

• 我应该补充一点，这个组件位于 Vue-Router 中
• 对显示页面的 HTML 元素的检查表明，手动 IMG 条目的处理方式与动态条目的处理方式不同。 [3]
• 我在具有本地管理员权限的 Win10 计算机上
• 我意识到<img :src="path" /> AND data(){return{ path: "@/assets/images/2.jpg"}} 也失败了。

3：https://i.stack.imgur.com/xhpVc.png

Answer 1

其实我前段时间也遇到过同样的问题，试试require：

 images: [
    { url: require("@/assets/images/1.jpg")},
    { url: require("@/assets/images/2.jpg") },
  ],