Đặt nền ảnh với các kiểu nội tuyến phản ứng

286

Tôi đang cố gắng truy cập một hình ảnh tĩnh để sử dụng trong một backgroundImagethuộc tính nội tuyến trong React. Thật không may, tôi đã cạn kiệt về cách làm điều này.

Nói chung, tôi nghĩ bạn chỉ cần làm như sau:

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>
    );
  }
}

Điều này làm việc cho <img>các thẻ. Ai đó có thể giải thích sự khác biệt giữa hai?

Thí dụ:

<img src={ Background } /> hoạt động tốt

Cảm ơn bạn!

javascript reactjs

— Kris
nguồn

471

Các dấu ngoặc nhọn bên trong thuộc tính backgroundImage là sai.

Có lẽ bạn đang sử dụng gói webpack cùng với trình tải tệp hình ảnh, vì vậy Nền phải là một Chuỗi: backgroundImage: "url(" + Background + ")"

Bạn cũng có thể sử dụng các mẫu chuỗi ES6 như dưới đây để đạt được hiệu quả tương tự:

backgroundImage: `url(${Background})`

— rgommezz
nguồn

Tôi nên đã thêm nó vào câu hỏi của tôi. Tôi có một chiều rộng và chiều cao được đặt (tương ứng 100% / 400px). Vấn đề phát sinh là do cách phản ứng xử lý hình ảnh tĩnh tôi tin.

— Kris

Người ta có nên thoát '(",') 'và các ký tự khoảng trắng trong biến Nền trước khi ghép theo w3.org/TR/CSS2/syndata.html#value-def-uri ?

— qbolec

49

Cú pháp đầy đủ sẽ giống như thế này:style={{backgroundImage: "url(" + Background + ")"}}

— mike

2

chỉ để mở rộng nhận xét của @ mike, bạn cần niềng răng cong gấp đôi vì một để React nhập vào là chế độ JS và một là để biểu thị đối tượng mới.

— Ciprian Tomoiagă

Tôi nhận được lỗi 'Phần' được xác định nhưng không bao giờ được sử dụng 'sau khi đưa Nền nhập này từ' ./background.jpg '; var partStyle = {width: "100%", height: "400px", backgroundImage: url(${Background})}; lớp Phần mở rộng Thành phần {render () {return (<phần style = {partStyle}> </ part>); }}

— Pavanan MS

40

Nếu bạn đang sử dụng ES5 -

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

Nếu bạn đang sử dụng ES6 -

backgroundImage: `url(${Background})`

Về cơ bản loại bỏ các dấu ngoặc nhọn không cần thiết trong khi thêm giá trị cho các tác phẩm thuộc tính backgroundImage sẽ hoạt động.

— Rushikesh Bharad
nguồn

2

Đối với tôi trong ES6, đó là backgroundImage: `url("${Background}")`ví dụ ES6 của bạn không hoạt động với tôi.

— S ..

37

Kiểu nội tuyến để đặt bất kỳ hình ảnh toàn màn hình:

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

— Hitesh Sahu
nguồn

17

Bạn cũng có thể đưa hình ảnh vào thành phần bằng cách sử dụng require()chức năng.

Lưu ý hai bộ dấu ngoặc nhọn . Bộ đầu tiên là để vào chế độ phản ứng và bộ thứ hai là để biểu thị đối tượng

— Khó khăn
nguồn

Nếu đường dẫn hình ảnh là URL web thay vì đường dẫn cục bộ thì sao? Một cái gì đó giống nhưhttps://images.com/myimage.png

— Aminu Kano

3

Ok tôi hiểu, khi sử dụng URL dựa trên web. Tôi chỉ nên viếturl(https://images.com/myimage.png)

— Aminu Kano

4

Thay vào đó, bạn có thể sử dụng Văn bản mẫu (kèm theo dấu tick: `...`) cho các thuộc backgroundImagetính như thế này:

backgroundImage: `url(${Background})`

— Fawaz Abdulla
nguồn

3

thử cái này:

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

— Hamza Khan
nguồn

2

Đối với tôi những gì đã làm việc là có nó như thế này

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

— brianokinyi
nguồn

-1

Bạn có thể thử usimg

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

— Jamilur Rahman
nguồn

Điều này không được khuyến khích vì nó sẽ ngăn webpack biết tài sản. Điều này sẽ kết thúc trong một lỗi bộ nhớ cache nếu ứng dụng phản ứng được mở ngoại tuyến.

— Thomas Kekeisen