প্রতিক্রিয়া ইনলাইন শৈলীর সাথে একটি পটভূমি সেট করা

Question

আমি backgroundImageপ্রতিক্রিয়ার মধ্যে একটি ইনলাইন সম্পত্তি ব্যবহার করার জন্য একটি স্থিতিশীল চিত্র অ্যাক্সেস করার চেষ্টা করছি । দুর্ভাগ্যক্রমে, আমি এটি কীভাবে শুষ্ক করেছি।

সাধারণত, আমি ভেবেছিলাম আপনি কেবল নীচের মত কাজ করেছেন:

import Background from '../images/background_image.png';

var sectionStyle = {
  width: "100%",
  height: "400px",
  backgroundImage: "url(" + { Background } + ")"
};

class Section extends Component {
  render() {
    return (
      <section style={ sectionStyle }>
      </section>
    );
  }
}

এটি <img>ট্যাগগুলির জন্য কাজ করে । কেউ দুজনের পার্থক্য ব্যাখ্যা করতে পারেন?

উদাহরণ:

<img src={ Background } /> ঠিক কাজ করে।

ধন্যবাদ!

Answer 1

ব্যাকগ্রাউন্ডের ভিতরে কোঁকড়া ধনুর্বন্ধনী ইমেজ সম্পত্তি ভুল।

সম্ভবত আপনি চিত্র ফাইল লোডার সহ ওয়েবপ্যাক ব্যবহার করছেন, সুতরাং ব্যাকগ্রাউন্ডটি ইতিমধ্যে একটি স্ট্রিং হওয়া উচিত: backgroundImage: "url(" + Background + ")"

একই প্রভাব অর্জন করতে আপনি নীচের হিসাবে ES6 স্ট্রিং টেম্পলেটগুলিও ব্যবহার করতে পারেন:

backgroundImage: `url(${Background})`

Comments

আমার প্রশ্নের সাথে আমার এটি যুক্ত করা উচিত ছিল। আমার প্রস্থ এবং উচ্চতা সেট রয়েছে (যথাক্রমে 100% / 400px)। উত্থাপিত সমস্যাটি আমার বিশ্বাস স্থিতিশীল চিত্রগুলি কীভাবে পরিচালনা করে তা কারণে to

— ক্রিস

W3.org/TR/CSS2/syndata.html#value-def-uri অনুযায়ী কনটেনটেশনের আগে ব্যাকগ্রাউন্ড ভেরিয়েবলের '(",') 'এবং সাদা স্পেস অক্ষরগুলি কী পালাতে হবে ?

— qbolec

সম্পূর্ণ সিনট্যাক্সটি দেখতে এইরকম হওয়া উচিত:style={{backgroundImage: "url(" + Background + ")"}}

— মাইকে

কেবল @ মাইকের মন্তব্যটি প্রসারিত করতে আপনার দ্বিগুণ কোঁকড়া ধনুর্বন্ধনী প্রয়োজন কারণ একটিতে প্রবেশ করার জন্য জেএস মোড এবং একটিতে নতুন অবজেক্টটি বোঝানো হচ্ছে।

— সিপ্রিয়ান টোমাইগă

'./Background.jpg' থেকে এই আমদানি ব্যাকগ্রাউন্ড দেওয়ার পরে আমি 'বিভাগ' সংজ্ঞায়িত হলেও কখনও ব্যবহার করা হয়নি ত্রুটিটি পাচ্ছি; var বিভাগ স্টাইল = {প্রস্থ: "100%", উচ্চতা: "400px", পটভূমি চিত্র: url(${Background})}; শ্রেণি বিভাগ বিভাগকে প্রসারিত করে {রেন্ডার () {রিটার্ন (<বিভাগ শৈলী = {বিভাগ স্টাইল}> </ বিভাগ>); }}

— পবনান এমএস

Answer 2

আপনি যদি ES5 ব্যবহার করে থাকেন -

backgroundImage: "url(" + Background + ")"

আপনি যদি ES6 ব্যবহার করে থাকেন -

backgroundImage: `url(${Background})`

মূলত ব্যাকগ্রাউন্ডে মান যোগ করার সময় অপ্রয়োজনীয় কোঁকড়া ধনুর্বন্ধনী বন্ধ করা ইমেজ সম্পত্তি কাজ করবে।

Comments

ES6 এ আমার জন্য এটি ছিল backgroundImage: `url("${Background}")`, কারণ আপনার ES6 উদাহরণটি আমার পক্ষে কার্যকর হয়নি।

— এস ..

হ্যালো ভারদ, আপনি যদি একাধিক ব্যাকগ্রাউন্ড চিত্র যুক্ত করতে চান তবে আপনি এটি কীভাবে করবেন। দুটি চিত্রের জন্য বলুন কীভাবে আপনি এটি করবেন? ধন্যবাদ

— সাফল্যের পথে

Answer 3

কোনও চিত্র পূর্ণ পর্দা সেট করতে ইনলাইন শৈলী:

style={{  
  backgroundImage: "url(" + "https://images.pexels.com/photos/34153/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" + ")",
  backgroundPosition: 'center',
  backgroundSize: 'cover',
  backgroundRepeat: 'no-repeat'
}}

Answer 4

আপনি require()ফাংশনটি ব্যবহার করে চিত্রটিকে উপাদানটিতে আনতে পারেন ।

<div style={{ backgroundImage: `url(require("images/img.svg"))` }}>

কোঁকড়া বন্ধনী দুটি সেট নোট করুন । প্রথম সেটটি প্রতিক্রিয়া মোডে প্রবেশের জন্য এবং দ্বিতীয়টি হ'ল অবজেক্ট ডেনোটিংয়ের জন্য

Comments

স্থানীয় পাথের পরিবর্তে যদি চিত্রের পথটি একটি ওয়েব ইউআরএল হয়? https://images.com/myimage.png

— এরকমই

ঠিক আছে আমি বুঝতে পারি, ওয়েব-ভিত্তিক ইউআরএল ব্যবহার করার সময়। আমার শুধু লিখতে হবেurl(https://images.com/myimage.png)

— আমিনু কানো

Answer 5

আপনি backgroundImageএই জাতীয় সম্পত্তির পরিবর্তে টেম্পলেট লিটারালগুলি (ব্যাক-টিক সহ: `...`) ব্যবহার করতে পারেন:

backgroundImage: `url(${Background})`

Answer 6

এটা চেষ্টা কর:

style={{ backgroundImage: `url(require("path/image.ext"))` }}

Answer 7

আমার জন্য যা কাজ করেছে তা এরকম হচ্ছে

style={{ backgroundImage: `url(${require("./resources/img/banners/3.jpg")})` }}

Answer 8

আপনি usimg চেষ্টা করতে পারেন

backgroundImage: url(process.env.PUBLIC_URL + "/      assets/image_location")

Comments

এটি সুপারিশ করা হয় না কেননা এটি ওয়েবপ্যাকটি সম্পদটি জানার থেকে বাধা দেবে। প্রতিক্রিয়া অ্যাপটি অফলাইনে খোলা থাকলে এটি একটি ক্যাশে মিসে শেষ হবে end

— থমাস কেকেইসেন