Question

我的vue模板代码如下：

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

college.cover_image包含要用于获取该div中图像的URL的图像的名称。我可以使用laravel中的类似代码轻松生成URL，但是用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。希望这会帮助你。谢谢

使用Laravel对象的Vue模板中动态图像的数据绑定样式

2 个答案: