Vue.js ডেটা-বাইন্ড স্টাইলের পটভূমি চিত্রটি কাজ করছে না

Question 1

আমি একটি উপাদান একটি চিত্রের src বাঁধাই চেষ্টা করছি, কিন্তু এটি কাজ করে না বলে মনে হচ্ছে। আমি একটি "অবৈধ অভিব্যক্তি পাচ্ছি। উত্পন্ন ফাংশন বডি: {ব্যাকগ্রাউন্ড ইমেজ: {url (চিত্র)।"।

ডকুমেন্টেশন পারেন 'কাবাব-কেস' বা 'উট-কেস' ব্যবহার করতে বলেছেন।

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

Heres a fiddle: 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')

অন্যথায়, যদি আপনার চিত্রের ইউআরএলটিতে বিশেষ অক্ষর থাকে (যেমন শ্বেতক্ষেত্র বা বন্ধনী) ব্রাউজারটি এটি সঠিকভাবে প্রয়োগ না করতে পারে। জাভাস্ক্রিপ্টে, অ্যাসাইনমেন্টটি দেখতে এই রকম হবে:

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

বা

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

প্রযুক্তিগতভাবে, এটি টেমপ্লেটে করা যেতে পারে, তবে এটি বৈধ এইচটিএমএল রাখতে পলায়নের দরকার নেই।

এখানে আরও তথ্য: ইউআরএল () এর মূল্য উদ্ধৃত করা কি সত্যিই প্রয়োজনীয়?

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>

কি এই সমাধান আরও সুবিধাজনক করে তোলে? প্রথমত, এটি পরিষ্কার। এবং তারপরে, আপনি যদি ভ্যু সিএলআই ব্যবহার করছেন (আমি ধরে নিলাম আপনি এটি করেন) তবে আপনি এটি ওয়েবপ্যাক দিয়ে লোড করতে পারেন।

দ্রষ্টব্য: ভুলে যাবেন না যে 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

আমি @ ডেভিড উত্তরের চেষ্টা করেছি , এবং এটি আমার সমস্যার সমাধান করে নি। অনেক ঝামেলার পরে, আমি একটি পদ্ধতি তৈরি করেছি এবং স্টাইলের স্ট্রিং সহ চিত্রটি ফিরিয়ে দিই।

এইচটিএমএল কোড

<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

আমি এমন একটি সমস্যা অনুভব করেছি যেখানে ফাইলের নেমে ফাঁকা জায়গা সহ পটভূমি চিত্রগুলি যেখানে শৈলী প্রয়োগ করা হয়নি। এটি সংশোধন করার জন্য আমাকে নিশ্চিত করতে হয়েছিল যে স্ট্রিং পাথটি একক উদ্ধৃতিতে আবৃত ছিল।

নীচে আমার উদাহরণে পালানো Note 'নোট করুন।

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

Question 10

গৃহীত উত্তরটি আমার কাছে সমস্যার সমাধান বলে মনে হচ্ছে না, তবে এটি হয়ে গেছে

আপনার ব্যাকগ্রাউন্ডটি নিশ্চিত করুনআম্মির ঘোষণাগুলি ইউআরএলে মোড়ানো রয়েছে (এবং ফাইলের নাম নির্বিশেষে শৈলী সঠিকভাবে কাজ করে তা উদ্ধৃত করে)।

ES2015 স্টাইল:

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

বা ES2015 ছাড়াই:

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

উত্স: ভয়েজ / ভ্যু-লোডার ইস্যু # 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ফোল্ডারের সমস্ত কিছুর জন্য অনুসন্ধান করবে । আরও তথ্য এখানে পাওয়া যাবে । এখানে অন্য ডকটি ব্যাখ্যা করে যে ভ্যু লোডার কীভাবে একক ফাইলের উপাদানগুলিতে লিঙ্কটি ব্যবহার করে।