如何在 vuepress 或 vuejs 中显示数组中的图像？

Question

我有一个如下所示的数组

  questions: [
    {
      question: "How do you say 'My Car' in Malayalam",
      answers: {
        a: "a) Ente Car",
        b: "b) Ninte/Ningalude Car",
        c: "c) Onte Car",
        d: "d) Aarudeyo Car",
      },
      images: "@alias/vallamkali.jpg",
      correctAnswer: "a",
    },
    {
      question: "How do you say 'your Car' in Malayalam",
      answers: {
        a: "a) Onte Car",
        b: "b) Aarudeyo Car",
        c: "c) Ninte/Ningalude Car",
        d: "d) Ente Car",
      },
      images: "@alias/il_leki.png",
      correctAnswer: "c",
    },
    {
      question: "How do you say 'our car' in Malayalam",
      answers: {
        a: "a) Achante Car",
        b: "b) Ninte/Ningalude Car",
        c: "c) Ente Car",
        d: "d) Nammalude/Njangalude Car",
      },
      images: "@alias/isthapetta_doubt.jpg",
      correctAnswer: "d",
    },
  ],

但是当我尝试使用下面的代码进行打印时

        <div v-if="index < count">
        
        <p>{{ questions[index]['question']}}</p>
        <p>{{ questions[index]['images']}}</p

        </div>

只有问题生成正确但图像显示不正确，只有位置打印如下，并以蓝色突出显示。请帮忙。

Answer 1

我没有使用函数调用。 我直接在img 标签本身中使用了require 关键字并且它起作用了。

<img :src="require(`@alias/${questions[index]['images']}`)" alt="No image here too" />

@Nikola Pavicevic - 感谢您帮助我朝这个方向思考！

Answer 2

您不能在 p 标签中显示图像 您需要制作方法或计算属性（假设 images = il_leki.png）：

methods: {
  getImg(img) {
    return require(`@alias/${img}`);
  }
}

然后在模板中调用 img 标签中的该方法（而不是 p 标签）传递 img ：

<img :src="getImg(questions[index]['images']) />