0

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:

Imagen no carga

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"

3
  • estas segura que la URL es la misma al abrir en el navegador y no existe un redireccionamiento al abrir la imagen en una ventana del navegador?, puedes publicar la URL que te abre al copiar la URL? el 4 ago. 2017 a las 20:42
  • Utiliza la url completa en lugar de usar la relativa, porque esta añadiendo esa ruta a partir del directorio actual y no desde la raíz.
    – Xerif
    el 4 ago. 2017 a las 21:59
  • Ya intenté eso Xerif y no funcionó. Por otro lado @GuillermoAndresFuentesMoral estoy seguro porque lo he probado, sería información incorrecta que di.
    – Maramal
    el 5 ago. 2017 a las 0:08

2 respuestas 2

0

el problema debe ser que tenes que agregarle tu dominio a las url.

Yo uso los Vue components y varía un poco, pero dentro de un componente una de las formas de solucionar eso es:

1- Agregar en la vista principal en el head lo siguiente

<script>
  window.App = { host: '{{ url("/") }}/' }
</script>

2- En la imagen llamas a la variable App

Otra opcion (como trabajas directo en la vista) es utilizar el helper directamente.

:src="'{{ url("/") }}/public/images/ads/' + ad.image1"

Espero haberte sido de ayuda.

Saludos

Maru

-1

El problema es Axios cuando te manda la promesa no puedes usar el this ya no te servirá.

var vm = new Vue({
    el: "#app",
    data: {
        term: "",
        category: "",
        ads: []
    },
    mounted: function() {
            axios.get('{{ url('/api/avisos/get') }}')
            .then(function(response) {
                vm.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) {
                vm.ads = response.data;
            }).catch(function(error) {
                console.log('Error: ' + error);
            });
        },
        submitForm: function() {
            if(this.term != '' || this.category != '') {
                this.loadAds();
            }
        },
    }
});
1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.