如何在 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

您不能在 p 标签中显示图片您需要 make method or computed 属性 (假设 images = il_leki.png):

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

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

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

Answer 2

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

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

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

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

How to display images from an array in vuepress or vuejs?

javascript

vue.js

vuejs2

vuepress