Vue.js डेटा-बाइंड शैली पृष्ठभूमि। काम नहीं कर रहा है

Question 1

मैं एक तत्व में एक छवि के src को बांधने की कोशिश कर रहा हूं, लेकिन यह काम नहीं करता है। मुझे एक "अमान्य अभिव्यक्ति मिल रही है। जेनरेटेड फंक्शन बॉडी: {बैकग्राउंडइमेज: {url (इमेज)}"।

प्रलेखन या तो 'कबाब-केस' या 'ऊंट-केस' का उपयोग करने के कहते हैं।

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

हेयर्स ए फिडल: https://jsfiddle.net/0dw9923f/2/

Question 2

मुद्दा यह है कि 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एक सामान्य जावास्क्रिप्ट ऑब्जेक्ट के लिए मान केवल समान नियमों का पालन करता है।

अद्यतन: एक अन्य नोट के बारे में क्यों आपको यह काम करने में परेशानी हो सकती है।

आपको यह सुनिश्चित करना चाहिए कि आपका imageमूल्य उद्धृत किया गया है ताकि अंतिम परिणामी स्ट्रिंग हो:

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

अन्यथा, यदि आपके छवि URL में विशेष वर्ण हैं (जैसे कि व्हॉट्सएप या कोष्ठक) तो ब्राउज़र इसे ठीक से लागू नहीं कर सकता है। जावास्क्रिप्ट में, असाइनमेंट ऐसा दिखेगा:

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

या

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

तकनीकी रूप से, यह टेम्प्लेट में किया जा सकता है, लेकिन इसे वैध HTML रखने के लिए आवश्यक बचना इसके लायक नहीं है।

यहाँ अधिक जानकारी: क्या वाकई url () का मूल्य उद्धृत करना आवश्यक है?

Question 3

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

Question 4

एक और समाधान:

<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()हमेशा वर्तमान फ़ाइल के पथ के सापेक्ष है।

Question 5

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

वहाँ कई तरीके हैं, लेकिन मैं टेम्पलेट स्ट्रिंग आसान और सरल पाया

Question 6

वी-फॉर लूप से डायनेमिक वैल्यू का उपयोग करके बैकग्राउंड इमेज स्टाइल को इस तरह से किया जा सकता है।

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

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

Question 8

मैंने @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 + '")';
},

Question 9

मैंने एक समस्या का अनुभव किया जहां फ़ाइल नाम में रिक्त स्थान के साथ पृष्ठभूमि चित्र जहां शैली को लागू नहीं किया जाता है। इसे ठीक करने के लिए मुझे यह सुनिश्चित करना था कि स्ट्रिंग पथ को सिंगल कोट्स में एनकैप्सुलेट किया गया था।

नीचे दिए गए मेरे उदाहरण में बच गए नोट पर ध्यान दें।

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

Question 10

स्वीकृत उत्तर मेरे लिए समस्या को हल करने के लिए प्रतीत नहीं हुआ, लेकिन इसने किया

अपनी पृष्ठभूमि सुनिश्चित करें कि घोषणाएं url में लपेटी गई हैं (और उद्धरण इसलिए शैली सही ढंग से काम करती है, कोई बात नहीं फ़ाइल नाम।

ES2015 शैली:

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

या ES2015 के बिना:

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

स्रोत: vuejs / vue-loader समस्या # 646

Question 11

मेरे ज्ञान के आधार पर, यदि आप अपना छवि फ़ोल्डर अपने सार्वजनिक फ़ोल्डर में रखते हैं, तो आप बस निम्नलिखित कार्य कर सकते हैं:

   <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/'भाग को हार्डकोड करने की आवश्यकता है । यही मुझे मिला था। मुझे लगता है कि इसका कारण यह है कि वेबपैक में, एक संदर्भ बनाया जाता है यदि आपकी आवश्यकता में अभिव्यक्ति होती है, तो संकलन समय पर सटीक मॉड्यूल का पता नहीं चलता है। इसके बजाय, यह @/assetsफ़ोल्डर में सब कुछ के लिए खोज करेगा । अधिक जानकारी यहां पाई जा सकती है । यहां एक अन्य डॉक्टर बताते हैं कि कैसे वाउ लोडर एकल फ़ाइल घटकों में लिंक का इलाज करता है।