React js css class background image không hiển thị

Question

Tôi đã thêm một lớp vào thành phần phản ứng.
tập tin CSS:

.bg{ 
    background: url('../img/bg.jpg'); 
    border: 2px solid black; 
} 

Phản ứng làm cho phương pháp:

render() { 
    return (
    <div> 
     <div className="bg"> 
     Hey This 
     </div> 
    </div> 
); 
} 

Trình duyệt cho thấy biên giới và tải các hình ảnh nhưng hình ảnh không hiển thị.

Ảnh chụp màn hình như sau:

bất cứ ai có thể cho tôi biết những gì tôi đang làm sai?

Answer 1

Điều này rất có thể xảy ra vì div.bg không được chỉ định height được chỉ định. Bởi vì điều này, height của nó phù hợp với nội dung văn bản chính xác.

Hình nền của mọi kích thước không ảnh hưởng đến kích thước của phần tử gốc. Nếu mục tiêu của bạn là có thể xem toàn bộ hình ảnh, bạn cần chỉ định height cho div.bg khớp với chiều cao của hình ảnh gốc.

Answer 2

.bg div của bạn hiện có kích thước 0x0 px, đây là lý do tại sao hình ảnh không hiển thị. Chỉ định chiều rộng và chiều cao để xem hình ảnh.

Ví dụ:

.bg { 
    height: 300px; 
    width: 300px; 
} 

Hoặc tốt hơn nữa sử dụng 100% để có toàn bộ phù hợp với hình ảnh trong div.

.bg { 
    height: 100%; 
    width: 100%; 
} 

Lưu ý: đảm bảo hình nền không quá lớn và mất nhiều thời gian để tải. Kích thước hình nền lớn có thể dẫn đến trải nghiệm người dùng rất kém. Xem xét sử dụng hình ảnh png, hình ảnh nhỏ có thuộc tính repeat hoặc svg.

Answer 3

background-size: contain; 

Không chắc chắn hình ảnh là gì, nhưng điều này sẽ làm kích thước hình ảnh để phù hợp với chiều cao div hiện tại được xác định bởi văn bản.

Answer 4

Thử thay đổi nền thành background-image. Cũng cung cấp cho lớp bg chiều cao và chiều rộng. Sau đó, cuối cùng, chỉ định background-size để có thể bao gồm. Một ví dụ sẽ trông giống như

.bg { 
 
    background-image: url('../img/bg.jpg'); 
 
    background-size: cover; 
 
    border: 2px solid black; 
 
    height: 300px; 
 
    width: 300px; 
 
}

này nên làm việc như tôi đã thử nó.

Answer 5

Đặt thư mục img trong thư mục công cộng

.css 
background: url('/img/bg.jpg'); 

hoặc

.js 
var logo=require("../img/Logo.svg"); 
<img src={logo} alt="logo"/>