Why does binding a variable to the src parameter in the img tag not work in vuejs?

Question

I have a Vuejs component containing an img tag. I can render the image with no problem if I hardcode the src like this.

<template>
    <div>
        <!-- <img class="rotate logo" alt="Vue logo" src="@/assets/abstractwave.png"/> -->
    </div>
</template>

<script>
export default {
    name: "RotatingImage",
    props: {
        filename: String
    },

}
</script>

I cannot render the image if I insert bind the src as a prop. As follows... Why is this? What must I change in order to render the image using a prop?

<template>
    <div>
        <img class = "rotate" alt="Vue logo" :src="`@/assets/${filename}`" />
    </div>
</template>

<script>
export default {
    name: "RotatingImage",
    props: {
        filename: String
    },

}
</script>

Upon inspection in the browser, I see that the src path is correct, yet the image does not show.

Nikola Pavicevic · Accepted Answer · 2021-11-27 17:03:01Z

1

You can make computed property:

computed: {
  getImgUrl() { 
     return require(`@/assets/${this.filename}`);
  }
}

Then in template bind it:

<img class = "rotate" alt="Vue logo" :src="getImgUrl" />

answered Nov 27, 2021 at 17:03

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

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

Collectives™ on Stack Overflow

Why does binding a variable to the src parameter in the img tag not work in vuejs?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related