I've encountered an issue while working on Vue.js where I'm struggling to render a couple of images from the local directory. What puzzles me is that this problem arises when using string interpolation, like in the code snippet below:
<img :src="`../../assets/images/${category.imgUrl}.jpeg`" :alt="category.name">
...while the following code displays the image as expected:
<img class="app-link app-link--google" src="../../assets/images/googlestore.png" alt="Google play store link">
The resulting src string and relative link appear to be similar in both snippets, so what could I possibly be overlooking?
Here is the complete code for the component under discussion.
<template>
<div class="explore">
<h2>Explore by category</h2>
<div class="categories">
<div class="category" v-for="category in categories" :key="category.name">
<router-link :to="`find${category.path}`">
<img :src="`../../assets/images/${category.imgUrl}.jpeg`" :alt="category.name">
<p>{{category.name}}</p>
</router-link>
</div>
</div>
</div>
</template>
<script>
import { categories } from '@/helpers';
export default {
name: 'explore',
data() {
return {
categories,
}
},
}
</script>
<style lang="scss" scoped>
$body-color: #0f1721;
$text-color: #ffffff;
$link-color: #00a2c7;
</style>