I have a Vue application with a Block component that needs to display an image. The Block component is used multiple times in the App component, each time passing a value to determine which image src to choose from an array. When I try to print
{{ this.ImagesLeft[this.img1] }}
it works fine. However, when I use the same string in the v-bind:src of the image tag, only the image icon is displayed (with width and height set to 0).
Here is my attempt:
Block.vue
<template>
<div>
<h1>{{ this.ImagesLeft[this.img1] }}</h1>
<img v-show="imageleft != null" v-bind:src="this.ImagesLeft[this.img1]">
</div>
</template>
<script>
export default{
name:'SmallBlock',
props:['title','imageleft','imageright'],
data(){
return{
ImagesLeft:['../assets/pics/4.jpg','../assets/meme_pics/4.jpg'],
img1:parseInt(this.$props.imageleft)
}
}
}
</script>
App.vue
<template>
<div class="wrapper-out">
<div class="wrapper-in">
<Block title="0" imageleft="0" imageright="0"/>
<Block title="2" imageleft="2"/>
</div>
<div class="wrapper-in">
<Block title="1" imageleft="1" imageright="1"/>
<Block title="3" imageleft="3"/>
</div>
<Content v-show="false"/>
</div>
</template>