Vue.js 데이터 바인딩 스타일 backgroundImage가 작동하지 않음

요소에서 이미지의 src를 바인딩하려고하는데 작동하지 않는 것 같습니다. "Invalid expression. Generated function body : {backgroundImage : {url (image)}"가 표시됩니다.

문서는 '케밥의 경우'또는 '낙타 경우'를 사용하도록했다.

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

여기 바이올린이 있습니다 : https://jsfiddle.net/0dw9923f/2/

문제는의 값 backgroundImage이 다음과 같은 문자열이어야한다는 것입니다.

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

다음은 작동하는 간단한 바이올린입니다. https://jsfiddle.net/89af0se9/1/

Re : kebab-case에 대한 아래의 코멘트, 이것이 당신이 그것을 할 수있는 방법입니다 :

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

즉,의 값 v-bind:style은 단순한 Javascript 객체이며 동일한 규칙을 따릅니다.

업데이트 : 이것이 작동하는 데 문제가있는 이유에 대한 또 다른 참고 사항입니다.

image최종 결과 문자열이 다음과 같도록 값이 따옴표로 묶여 있는지 확인해야합니다 .

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

그렇지 않으면 이미지 URL에 특수 문자 (예 : 공백 또는 괄호)가있는 경우 브라우저가이를 제대로 적용하지 못할 수 있습니다. Javascript에서 할당은 다음과 같습니다.

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

또는

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

기술적으로 이것은 템플릿에서 수행 할 수 있지만 유효한 HTML을 유지하는 데 필요한 이스케이프는 그만한 가치가 없습니다.

여기에 더 많은 정보 : url ()의 값을 인용하는 것이 정말로 필요합니까?

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

또 다른 해결책 :

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

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

이 솔루션을 더 편리하게 만드는 것은 무엇입니까? 첫째, 깨끗합니다. 그런 다음 Vue CLI를 사용하는 경우 (그렇다고 가정합니다) 웹팩으로로드 할 수 있습니다.

참고 : require()항상 현재 파일의 경로에 상대적 임을 잊지 마십시오 .

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

여러 가지 방법이 있지만 템플릿 문자열을 쉽고 간단하게 찾았습니다.

v-for 루프 의 동적 값을 사용하여 배경 이미지 스타일을 바인딩하는 방법은 다음과 같습니다.

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

단일 반복 구성 요소의 경우이 기술이 나를 위해 작동합니다.

<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+')'
                }
            },
}

@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 + '")';
},

파일 이름에 공백이있는 배경 이미지에서 스타일이 적용되지 않는 문제가 발생했습니다. 이 문제를 해결하기 위해 문자열 경로가 작은 따옴표로 캡슐화되었는지 확인해야했습니다.

아래의 예제에서 이스케이프 된 \ '에 유의하십시오.

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

받아 들여진 대답이 문제를 해결하지 못하는 것 같았지만 이것은

backgroundImage 선언이 url (및 따옴표로 묶여 있는지 확인하여 파일 이름에 관계없이 스타일이 올바르게 작동하는지 확인하십시오.

ES2015 스타일 :

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

또는 ES2015없이 :

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

출처 : vuejs / vue-loader 문제 # 646