I recently set up an application using the Vue CLI, and within one of my components, I have included the following code snippet:
<template>
<div v-loading="loading">
<el-carousel :interval="4000" type="card" height="350px">
<el-carousel-item v-for="element in persons" :key="element.id">
<div class="testimonial-persons">
<el-avatar :size="80">
<img :src="require('@assets/testimonial/'+ element.photo)">
</el-avatar>
<h3>{{element.name}}</h3>
<h4>{{element.occupation}}</h4>
<hr style="width:50%;">
<p>"{{element.comment}}"</p>
</div>
</el-carousel-item>
</el-carousel>
</div>
</template>
Upon loading the page, an API request fetches an array of objects which I store as persons for iteration within the template.
Persons
[
{
"testimonial_id": "2",
"persons_id": "1",
"id": "1",
"name": "Tom lima",
"occupation": "CEO / Pugmania",
"comment": "Simply the best customer service and attention to detail.",
"photo": "20200320193143R7pChVea3IkmujRRmS.png"
},
]
While everything seems to function properly, issues arise with loading images.
https://i.sstatic.net/7Bbic.png
Interestingly, manually inputting the image name yields successful results.
<img src="@assets/testimonial/20200320193143R7pChVea3IkmujRRmS.png">
Any suggestions on how to resolve this matter?