I am creating this application with Laravel 5.4 and Vue 2 and I need to show an image if it is present or not. For this I used the directives v-if
and v-else
.
To begin with, this is my JS code:
var vm = new Vue({
el: "#app",
data: {
term: "",
category: "",
ads: []
},
mounted: function() {
var self = this;
axios.get('{{ url('/api/avisos/get') }}')
.then(function(response) {
self.ads = response.data;
});
},
methods: {
loadAds: function() {
var self = this;
axios.get('{{ url('/api/avisos/get') }}', {
params: {
term: this.term,
category: this.category
}
}).then(function(response) {
self.ads = response.data;
}).catch(function(error) {
console.log('Error: ' + error);
});
},
submitForm: function() {
if(this.term != '' || this.category != '') {
this.loadAds();
}
},
}
});
And thanks to Bootstrap 4 I use cards and I render information:
<div class="row">
<div class="card" style="width: 20rem; margin-left:1rem;" v-for="ad in ads" v-cloak>
<img v-if="ad.image1" class="card-img-top" :src="'/public/images/ads/' + ad.image1" alt="Imagen">
<img v-else class="card-img-top" src="/public/images/logo.png" alt="No Imagen">
<div class="card-block">
<h4 class="card-title">@{{ ad.title }}</h4>
<p class="card-text">
@{{ ad.description }}<br><hr>
<strong>$@{{ ad.cost }}</strong>
</p>
<a href="#" class="btn btn-primary">Contactar con vendedor</a>
</div>
</div>
</div>
Everything works perfectly, except that the images are shown in the HTML but not in practice:
If I copy that same URL and paste it into the browser, it shows me the image perfectly.
I've tried using v-show
instead of v-if
and v-attr="src: link"
or v-bind:src="link"
instead of :src
but there's no case.
Any ideas of what is happening and how to solve this?
Thank you!
Edit :
The craziest thing of all is that the images are perfectly displayed in Microsoft Edge and Google Chrome mobile, it does not work in Firefox or Google Chrome, nor Internet Explorer (IE does not even show ads for an error:
[Vue warn]: Error in mounted hook: "ReferenceError: 'Promise' is not defined"