Vue 2 directive: src does not show image but loads HTML

0

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"

    
asked by Maramal 04.08.2017 в 21:26
source

1 answer

0

The problem must be that you have to add your domain to the url.

I use the Vue components and it varies a bit, but within a component one of the ways to solve that is:

1- Add the following to the main view in the head

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

2- In the image, call the variable App

Another option (as you work directly in the view) is to use the helper directly.

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

I hope I have been of help.

Greetings

Maru

    
answered by 25.08.2017 / 18:04
source