พื้นหลังสไตล์การผูกข้อมูล Vue.js

ฉันพยายามผูก src ของรูปภาพในองค์ประกอบ แต่ดูเหมือนจะไม่ได้ผล ฉันได้รับ "นิพจน์ไม่ถูกต้อง Generated function body: {backgroundImage: {url (image)}"

เอกสารกล่าวว่าจะใช้อย่างใดอย่างหนึ่ง 'Kebab กรณี' หรือ 'อูฐกรณี'

<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 (ฉันคิดว่าคุณทำ) คุณสามารถโหลดด้วย webpack

หมายเหตุ: อย่าลืมว่าrequire()จะสัมพันธ์กับเส้นทางของไฟล์ปัจจุบันเสมอ

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

มีหลายวิธี แต่ฉันพบว่าสตริงแม่แบบนั้นง่ายและสะดวก

การผูกลักษณะภาพพื้นหลังโดยใช้ค่าไดนามิกจากv-for loop สามารถทำได้เช่นนี้

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

ฉันประสบปัญหาเกี่ยวกับภาพพื้นหลังที่มีช่องว่างในชื่อไฟล์ที่ทำให้ไม่สามารถใช้สไตล์นี้ได้ เพื่อแก้ไขสิ่งนี้ฉันต้องแน่ใจว่าเส้นทางสตริงถูกห่อหุ้มด้วยเครื่องหมายคำพูดเดี่ยว

สังเกต Escape \ 'ในตัวอย่างของฉันด้านล่าง

<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 issue # 646

จากความรู้ของฉันหากคุณใส่โฟลเดอร์รูปภาพในโฟลเดอร์สาธารณะคุณสามารถทำสิ่งต่อไปนี้:

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

หากคุณใส่ภาพของsrc/assets/คุณคุณต้องใช้ต้องใช้ แบบนี้:

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

สิ่งสำคัญอย่างหนึ่งคือคุณไม่สามารถใช้นิพจน์ที่มี URL แบบเต็มเช่นนี้project.image = '@/assets/image.png'ได้ คุณต้องฮาร์ดโค้ด'@assets/'ส่วนนี้ นั่นคือสิ่งที่ฉันได้พบ ฉันคิดว่าเหตุผลก็คือใน Webpack บริบทจะถูกสร้างขึ้นหากความต้องการของคุณมีนิพจน์ดังนั้นจึงไม่ทราบโมดูลที่แน่นอนในเวลาคอมไพล์ แต่จะค้นหาทุกอย่างใน@/assetsโฟลเดอร์แทน ข้อมูลเพิ่มเติมสามารถพบได้ที่นี่ นี่คือเอกสารอื่นที่อธิบายถึงวิธีที่ Vue loader ปฏิบัติต่อลิงก์ในคอมโพเนนต์ไฟล์เดียว