Dynamically change src path in vuejs

Question

I want to dynamically change the path of my <img>'s src in Vue:

<template>
  <img :src="'../../assets/logo/'+LogoSrc()" alt="logo black" :height="height+'px'" />
</template>

<script>
export default {
  name: "Logo",
  props: {
    logoColor: {
      type: String,
      default: "dark"
    },
    height: {
      type: Number,
      default: 10
    }
  },
  data() {
    return {};
  },

  methods: {
    LogoSrc() {
      if (this.logoColor === "dark") {
        return "logo-black.svg";
      }
    }
  }
};
</script>

<style scoped>
</style>

Though the path is right, the image is still not loading. I tried using src without the v-bind with path being the same (../../assets/logo/logo-black.svg), and it seems to be working fine.

tony19 · Accepted Answer · 2020-06-27 09:11:19Z

1

For dynamic URLs, use require():

<img :src="require('../../assets/logo/' + LogoSrc())">

demo

answered Jun 27, 2020 at 9:11

tony19

140k23 gold badges281 silver badges354 bronze badges

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

Comments

Kalimah · Accepted Answer · 2020-06-27 09:15:51Z

0

Make it a computed value:

<template>
  <img :src="LogoSrc" alt="logo black" :height="height+'px'" />
</template>

<script>
export default {
  name: "Logo",
  props: {
    logoColor: {
      type: String,
      default: "dark"
    },
    height: {
      type: Number,
      default: 10
    }
  },
  data() {
    return {};
  },

  computed: {
    LogoSrc() {
      if (this.logoColor === "dark") 
        return "../../assets/logo/logo-black.svg";
      
      return "";
    }
  }
};
</script>

<style scoped>
</style>

answered Jun 27, 2020 at 9:15

Kalimah

11.5k11 gold badges48 silver badges86 bronze badges

Collectives™ on Stack Overflow

Dynamically change src path in vuejs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related