How to get src from object to my Vue.js image

Question

Now I am trying to get src from object to my vue.js component

export const Quizzes = [
  {
    firstWord: "happy",
    secondWord: "srećan",
    imageSrc: "../assets/happy--women.jpg",
  },
]

my data.js file looks like this

and how can i use this in my Vue.js component

<img class="happy-women" src="../assets/earth.jpg" alt="Quiz Image" />

here instead of src link

What's the vue version ? and what's the build tool vue cli or vite? — Boussadjra Brahim
– Boussadjra Brahim, Commented Aug 30, 2022 at 18:59
Can you try to use require function like this :src="require('../assets/earth.jpg')" — Deniz Gürsoy
– Deniz Gürsoy, Commented Aug 30, 2022 at 19:01
Not sure how Quizzes is added to your component but say you have it as an array in your component, you bind the <img> src like so: <img :src="Quizzes[i].imageSrc">. The index of the array can be from a v-for directive or some other logic inside your component — yoduh
– yoduh, Commented Aug 30, 2022 at 21:50

Rohìt Jíndal · Accepted Answer · 2022-08-31 07:37:48Z

1

As per my understanding, You just simply want to bind the object imageSrc property value in the src attribute of img element in the template ? If Yes, Here you go :

<img v-for="(quiz, index) in Quizzes"
  :key="index"
  :class="`${quiz.firstWord}-${quiz.secondWord}`"
  :src="quiz.imageSrc"
  alt="Quiz Image" />

answered Aug 31, 2022 at 7:37

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to get src from object to my Vue.js image

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related