Estoy creando esta aplicación con Laravel 5.4 y Vue 2 y necesito mostrar una imagen si está o no presente. Para esto utilicé las directivas v-if
y v-else
.
Para empezar éste es mi código JS:
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();
}
},
}
});
Y gracias a Bootstrap 4 uso tarjetas y renderizo la información:
<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>
Todo funciona a la perfección, excepto que las imágenes son mostradas en el HTML pero no en la práctica:
Si yo copia esa misma URL y la pego en el navegador, me muestra la imagen perfectamente.
He probado usar v-show
en vez de v-if
y v-attr="src: link"
o v-bind:src="link"
en vez de :src
pero no hay caso.
¿Alguna idea de qué está pasando y cómo solucionar esto?
Gracias!
Edito:
Lo más loco de todo es que las imágenes se muestran perfectamente en Microsoft Edge y Google Chrome mobile, no funciona en Firefox ni Google Chrome, ni Internet Explorer (en IE ni siquiera se muestran los avisos por un error:
[Vue warn]: Error in mounted hook: "ReferenceError: 'Promise' no está definido"