<div class="row">
<div :key="map.name" v-for="map in match.maps" class="col-lg-4 mt-5">
<img width="100" height="50" src="../assets/ovp.png">
<img v-bind:src="'../assets/' + map.name + '.png'">
{{ map.name }}
</div>
</div>
The issue with the code snippet above is that while the first image tag successfully displays the image, the second image tag does not render the expected image. Upon inspection of the code, it appears as follows:
<div data-v-780f357b="" class="col-lg-4 mt-5">
<img data-v-780f357b="" src="/img/ovp.3ffb145b.png" width="100" height="50">
<img data-v-780f357b="" src="../assets/ovp.png">
ovp
</div>
To see how this issue affects the website's appearance, check out this screenshot.