Vue 3 dynamic image

Question

I am using a v-for to load data on cards. The image is not showing up and not sure why. I though :src = "'item.img'" or :src = "{{item.img}}" would work, but neither are working.

Here is my code

 <div v-for="(item, index) in basicData" :key="index">
      <transition class="slide">
        <div v-if="index >= start && index < end" class="card">
          <div class="card-body">
            <h5 class="card-title">{{item.title}}</h5>
            <img
              :src="'item.img'"
              class="card-img-top"
              :alt="'item.img'"
              style="margin: 20px 5px"
            />
            <p class="card-text">Some quick example text.</p>
          </div>
        </div>
      </transition>

and here is the screen shot

When I hard code src="../assets/featured/pizzaOne.jpeg" the image appears.

Does this answer your question? [How to bind img src to data in Vue](https://stackoverflow.com/questions/48847644/how-to-bind-img-src-to-data-in-vue) — Michal Levý, Jan 15 '22 at 16:56

score 1 · Accepted Answer · answered Jan 15 '22 at 17:03

1

You can create method or computed property:

methods() {
  getImage(imagePath) {
    return require(imagePath);
  }
}

Then in template call that method:

<img
  :src="getImage(item.img)"
  class="card-img-top"
  :alt="item.img"
  style="margin: 20px 5px"
/>

answered Jan 15 '22 at 17:03

Nikola Pavicevic

21,952
9
25
46

I am getting an Error: Cannot find module '../assets/featured/pizzaOne.jpeg'. When I hard code in '../assets/featured/pizzaOne.jpeg'. the image show up – Aaron Jan 15 '22 at 17:18
yes they are in the src/assets folder and I created a subfolder featured. Here is the relative path src/assets/featured/pizzaOne.jpeg – Aaron Jan 15 '22 at 17:33
The question is clear duplicate of existing and already answered question. You should always first search for duplicates and if the duplication is clear (as in this case) mark it as duplicate instead of answering... – Michal Levý Jan 15 '22 at 18:30

Vue 3 dynamic image

1 Answers1