v-bind:src property not working with v-for

Question

For some reason the imageURL property is not working, even though the url is correct, with the v-bind:src attribute.

The template:

<div v-for="project in projects" :key="project.id">
    <section class="project-wrapper">

        <img :src="project.imageURL" alt="Project image"/> //THE PROBLEM

        <h1>{{ project.title }}</h1>
        <p>{{ project.about }}</p>
        <router-link :to="{ name: project.routeName }" class="type-two-link">ver projeto</router-link>

    </section>
</div>

The script:

data() {
    return {
      projects: [
        {
          id: this.projectId,
          title: "Minimalist Portfolio",
          about: "...",
          imageURL: "./minimalist-porfolio-desktop.png", //THE PROBLEM
          routeName: "Minimalist Portfolio",
        },
      ],
    };
  },

What am I doing wrong? Any help is welcome.

*even though the url is correct*, its a relative path, so it won't be correct when you build, your want to `require` or `import` the image then it will be the correct — Lawrence Cherone, Aug 29 '21 at 14:32
additionally, if `projects` is from a backend api call, routeName will most likely encounter issues at some point, it would be fixed by using a slug `:to="project.slug"` — Lawrence Cherone, Aug 29 '21 at 14:35
@Amaarrockz I do not think dynamic argument is allowed with `require` — Michal Levý, Aug 29 '21 at 14:54
Okay, @LawrenceCherone. Didn't know this was an issue. I'm going to do some research. Thank you. — Pedro Henrique Alves Moura, Aug 29 '21 at 14:58

score 2 · Accepted Answer · answered Aug 29 '21 at 15:22

I've tried to use 'required()' in the template, but it didn't worked. So, this is how I solved it:

data() {
    return {
      projects: [
        {
         "...",

          imageURL: require("../../assets/images/projects/minimalist-portfolio/minimalist-porfolio-desktop.png"),

          routeSlugName: "My Portfolio",
        },
      ],
    };
  },
,

You can learn more here: Static image src in Vue.js template

v-bind:src property not working with v-for

1 Answers1