0

I'm trying to display a few JPG-pictures, that are in my src/assets/images folder by making use of the v-for-directive, but somehow the browser cannot find them. Weirdly enough, if I manually summon the pictures with identical coordinates, it works. Below you find the code to reproduce it. Screenshot of Page.

<template>
  <div>
    <h2>Success</h2>
    <img src="@/assets/images/1.jpg" width="10%" />
    <img src="@/assets/images/2.jpg" width="10%" />

    <h2>Failure</h2>
    <img
      v-for="(image, i) in images"
      :src="image.url"
      :key="i"
      @click="showProp(image.url, i)"
      width="10%"
    />
  </div>
</template>
<script>
export default {
  methods: {
    showProp: function (url, i) {
      console.log(url, " and ", i);
    },
  },
  data() {
    return {
      images: [
        { url: "@/assets/images/1.jpg" },
        { url: "@/assets/images/2.jpg" },
      ],
    };
  },
};
</script>
<style scoped>
h2 {
  padding: 30px;
}
</style>

When I click on the broken pictures in the browser, first left picture then right picture, the console reads:

@/assets/images/1.jpg  and  0
@/assets/images/2.jpg  and  1

What did I try?

  • Try to find whether previous Stack Overflow posts [1,2] might be able to solve my problem
  • Different Path-Syntax (@/assets/ OR ../assets/)
  • Getting rid of aestethics
  • Forcing type match of image.url with String(image.url)

1: Vue.js image v-for bind
2: How to reference static assets within vue javascript

Remarks:

  • I should add that this component is inside a Vue-Router
  • Inspection of HTML-elements of the displayed page shows that manual IMG-entries were processed differently than dynamical entries. [3]
  • I'm on a Win10-machine with local Admin-rights
  • I realized that <img :src="path" /> AND data(){return{ path: "@/assets/images/2.jpg"}} also fails.

3: https://i.stack.imgur.com/xhpVc.png

Djamb4la
  • 3
  • 2

1 Answers1

3

I actually had the same problem a while ago, try to require:

 images: [
    { url: require("@/assets/images/1.jpg")},
    { url: require("@/assets/images/2.jpg") },
  ],
Bernardo Carvalho
  • 46
  • 2
  • Thanks a lot Bernardo, it works! Alternatively, I found that `:src="require(\`@/assets/images/\` + image.url)"` and `images: [{ url: "1.jpg" }, { url: "2.jpg" },]` also works. This issue was discussed on Github: /vuejs-templates/webpack/issues/126. – Djamb4la Sep 25 '20 at 17:59