การตั้งค่า backgroundImage ด้วย React Inline Styles

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

โดยทั่วไปฉันคิดว่าคุณเพิ่งทำดังนี้:

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 } /> ทำงานได้ดี

ขอบคุณ!

วงเล็บปีกกาด้านในคุณสมบัติ backgroundImage ผิด

อาจเป็นไปได้ว่าคุณกำลังใช้ webpack พร้อมกับไฟล์รูปภาพ loader ดังนั้น Background ควรเป็น String อยู่แล้ว: backgroundImage: "url(" + Background + ")"

คุณยังสามารถใช้เทมเพลตสตริง ES6 ได้ด้านล่างเพื่อให้ได้เอฟเฟกต์เดียวกัน:

backgroundImage: `url(${Background})`

หากคุณกำลังใช้ ES5 -

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

หากคุณกำลังใช้ ES6 -

backgroundImage: `url(${Background})`

โดยทั่วไปการลบเครื่องหมายปีกกาที่ไม่จำเป็นในขณะที่เพิ่มคุณค่าให้กับงานคุณสมบัติ backgroundImage จะทำงาน

รูปแบบอินไลน์เพื่อตั้งค่าภาพเต็มหน้าจอ:

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'
}}

คุณยังสามารถนำภาพเข้าสู่องค์ประกอบโดยใช้require()ฟังก์ชั่น

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

หมายเหตุทั้งสองชุดของวงเล็บปีกกา ชุดแรกใช้สำหรับการเข้าสู่โหมดตอบโต้และชุดที่สองใช้สำหรับแสดงวัตถุ

คุณสามารถใช้เทมเพลตวรรณกรรม (ล้อมรอบด้วยเครื่องหมายขีดหลัง: `... ') แทนbackgroundImageคุณสมบัติเช่นนี้:

backgroundImage: `url(${Background})`

ลองนี้:

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

สำหรับฉันสิ่งที่ทำงานคือมีมันเช่นนี้

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

คุณสามารถลอง usimg

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