Блог

У меня есть массив, который выглядит следующим образом

   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>
 

Только вопросы сгенерированы правильно, но изображения отображаются неправильно, только местоположение печатается, как показано ниже, и подсвечивается синим цветом. Пожалуйста, помогите.

Вы не можете отображать изображения в теге p, который вам нужно создать методом или вычисляемым свойством (при условии, что изображения = il_leki.png):

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

затем в шаблоне вызовите этот метод в теге img (вместо тега p) , передав img :

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

Я не использовал вызов функции. Я напрямую использовал require ключевое слово в самом img теге, и это сработало.

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

@Никола Павичевич — Спасибо, что помог мне думать в этом направлении!