Стиль привязки данных для динамического изображения в шаблоне Vue с использованием объекта laravel

Question

Мой код для шаблона VUE выглядит следующим образом:

<div class="collegecardimage rounded" v-bind:style="{ 'backgroundImage': 'url(' + '/storage/college_images/{{ college.cover_image}}' + ')' }"></div>

college.cover_image содержит имя изображения, с помощью которого я хочу получить URL-адрес моего изображения в этом разделе. Я бы легко сгенерировал URL, используя подобный код в laravel, но с vue это было сложно.

Answer 1

После многих экспериментов я получил это, работая со следующим кодом:

<div class="collegecardimage rounded" v-bind:style="{ 'backgroundImage': 'url(' + '/storage/college_images/'+ college.cover_image + ')' }"></div>

Для тега img работал следующий код:

<img class="collegecardimage rounded " v-bind:src="'/storage/college_images/'+ college.cover_image"/>

Большое спасибо всем ответам выше.

Answer 2

Вы можете использовать метод для этого, который будет возвращать точный URL для этого.

в моем шаблоне компонента:

<img :src="getImageSrc(value.client_image)" alt="Image">

метод:

   getImageSrc(image){
     if(image){
        return this.baseUrl + 'image_upload/testimonial/' +image;
             }
     },

данные:

data:function(){
            return {
                 results:{},
                 parPage: 10,
                 searchValue:'',
                 id:'',
                 baseUrl: window.base_url,
             }
         },

и, наконец, в своем файле главного блейда я поместил путь URL:

  <script >
        var base_url = "{{ url('/').'/' }}";
    </script>

, чтобы я мог получить URLоткуда угодно.Надеюсь, что это поможет вам.спасибо