Programing

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

lottogame 2020. 12. 27. 10:17
반응형

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

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

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

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

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

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

참조 URL : https://stackoverflow.com/questions/35242272/vue-js-data-bind-style-backgroundimage-not-working

반응형