Having trouble loading an image in vue.js
I've been attempting to load my image without success. If anyone has a solution, I would greatly appreciate your help.
This is the HTML source:
<div class="col-md-4 col-sm-6 portfolio-item" v-for="(obj, key) in portfolioJSON" :key="key">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal2">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fas fa-plus fa-3x"></i>
</div>
</div>
<img v-for="image in imageArray" :src="image" class="img-fluid" alt="">
</a>
<div class="portfolio-caption">
<h4>{{ obj.caption }}</h4>
<p class="text-muted">{{ obj.title }}</p>
</div>
</div>
And here is the corresponding JavaScript code:
export default {
computed: {
imageArray: function() {
return this.portfolioJSON.map(obj => obj.img)
}
},
data: () => ({
portfolioJSON: [
{
img: '/something/random/img.jpg',
caption: 'test',
title: 'test1'
},
{
img: '/something/random/img.jpg',
caption: 'Explore',
title: 'test2'
}
]
})
}
Despite following these steps, the image is not rendering as expected and only one picture is displayed.