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

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

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

0
Saurya 13 Сен 2018 в 13:31

2 ответа

Лучший ответ

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

<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"/>

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

1
Saurya 13 Сен 2018 в 12:01

Вы можете использовать для этого метод, который вернет для этого точный 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 откуда угодно. Надеюсь, что это поможет вам. Спасибо

0
Emtiaz Zahid 13 Сен 2018 в 10:42