Question

我正在尝试在一个元素中绑定图像的src，但它似乎不起作用。我得到一个“无效的表达式。生成的函数体：{backgroundImage：{url（image）}”。

documentation说要使用'烤肉串案例'或'驼峰案例'。

<div class="circular" v-bind:style="{ backgroundImage: { url(image) }"></div>

这是一个小提琴：https://jsfiddle.net/0dw9923f/2/

Answer 1

问题是backgroundImage的值必须是这样的字符串：

<div class="circular" v-bind:style="{ backgroundImage: 'url(' + image + ')' }"></div>

这是一个简化的小提琴：https://jsfiddle.net/89af0se9/1/

回复：下面关于烤肉串案例的评论，你可以这样做：

<div class="circular" v-bind:style="{ 'background-image': 'url(' + image + ')' }"></div>

换句话说，v-bind:style的值只是一个普通的Javascript对象，遵循相同的规则。

更新：另一个说明为什么你可能无法让它工作。

您应该确保引用了image值，以便最终生成的字符串为：

url('some/url/path/to/image.jpeg')

否则，如果您的图片网址中包含特殊字符（例如空格或括号），则浏览器可能无法正确应用它。在Javascript中，赋值看起来像：

this.image = "'some/url/path/to/image.jpeg'"

或

this.image = "'" + myUrl + "'"

从技术上讲，这可以在模板中完成，但保持有效HTML所需的转义是不值得的。

此处有更多信息：Is quoting the value of url() really necessary?

Answer 2

<div class="img-banner" :style="{'background-image': 'url(' + require('./assets/media/baner1.jpg') + ')'}"></div>

Answer 3

<div :style="{ backgroundImage: `url(${post.image})` }">

有多种方法，但我发现模板字符串容易

Answer 4

我尝试了@david的答案，但没有解决我的问题。经过很多麻烦之后，我制作了一个方法，并使用样式字符串返回了图像。

HTML代码

<div v-for="slide in loadSliderImages" :key="slide.id">
    <div v-else :style="bannerBgImage(slide.banner)"></div>
</div>

方法

bannerBgImage(image){
    return 'background-image: url("' + image + '")';
},

Answer 5

另一种解决方案：

<template>
  <div :style="cssProps"></div>
</template>

<script>
  export default {
    data() {
      return {
        cssProps: {
          backgroundImage: `url(${require('@/assets/path/to/your/img.jpg')})`
        }
      }
    }
  }
</script>

什么使此解决方案更方便？首先，它更清洁。然后，如果您使用的是Vue CLI（我想是的话），则可以通过webpack加载它。

注意：请不要忘记require()总是相对于当前文件的路径。

Answer 6

接受的答案似乎并不能解决我的问题，但这确实可以解决

确保您的backgroundImage声明用url（和引号引起来）进行包装，这样无论文件名如何，样式都能正常工作。

ES2015风格：

<div :style="{ backgroundImage: `url('${image}')` }"></div>

或者没有ES2015：

<div :style="{ backgroundImage: 'url(\'' + image + '\')' }"></div>

来源：vuejs/vue-loader issue #646

Answer 7

对于单个重复组件，此技术对我来说是有效的

<div class="img-section" :style=img_section_style >

computed: {
            img_section_style: function(){
                var bgImg= this.post_data.fet_img
                return {
                    "color": "red",
                    "border" : "5px solid ",
                    "background": 'url('+bgImg+')'
                }
            },
}

Answer 8

可以使用 v-for 循环中的 dynamic 值

绑定背景图像样式，如下所示。

<div v-for="i in items" :key="n" 
  :style="{backgroundImage: 'url('+require('./assets/cars/'+i.src+'.jpg')+')'}">
</div>

Answer 9

我遇到了一个问题，即文件名中带有空格的背景图像导致无法应用样式。为了解决这个问题，我必须确保将字符串路径封装在单引号中。

在下面的示例中注意转义的\'。

<div :style="{
    height: '100px',
    backgroundColor: '#323232',
    backgroundImage: 'url(\'' + event.image + '\')',
    backgroundPosition: 'center center',
    backgroundSize: 'cover'
    }">
</div>

Answer 10

据我所知，如果您将图像文件夹放在公用文件夹中，则只需执行以下操作：

   <div :style="{backgroundImage: `url(${project.imagePath})`}"></div>

如果您将图像放在 src/assets/ 中，则需要使用 require。像这样：

   <div :style="{backgroundImage: 'url('+require('@/assets/'+project.image)+')'}">. 
   </div>

一件重要的事情是，您不能使用像 project.image = '@/assets/image.png' 这样包含完整 URL 的表达式。您需要对 '@assets/' 部分进行硬编码。这就是我发现的。我认为原因是在 Webpack 中，如果您的 require 包含表达式，则会创建一个上下文，因此在编译时不知道确切的模块。相反，它将搜索 @/assets 文件夹中的所有内容。可以在 here 中找到更多信息。这是另一个 doc 解释了 Vue 加载器如何处理单个文件组件中的链接。

Answer 11

我必须在 .default 之后添加 require 才能使其工作：

:style="{ backgroundImage: `url(${require('@/media/bg-1.jpg').default})` }"

Answer 12

我在这篇文章中搜索过，但没有人用 require 文件名发布 dynamic，这就是我发布它的原因。

:style="{ backgroundImage: `url(${require('@/assets/' + banner.image)})` }"

Answer 13

尝试 encodeURI()

我遇到的问题是由于我尝试使用的 URL 中的特殊字符和/或空格造成的。

所以我不得不改变这个：

:style="{ backgroundImage : 'url(' + item.media.url + ')' }"

为此：

:style="{ backgroundImage : 'url(' + encodeURI(item.media.url) + ')' }"

Answer 14

:style="{ backgroundImage: `url('${src}')` }"

Vue.js数据绑定样式backgroundImage不起作用

14 个答案: