React js css class background image not visible

Ho aggiunto una classe nel componente react.
file di CSS:React js css class background image not visible

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

Reagire metodo render:

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

Il browser mostra il confine e carica l'immagine ma l'immagine non è visibile.

Lo screenshot è il seguente:

Qualcuno può dirmi che cosa sto facendo male?

fonte

2016-02-08 Mahesh Haldar

I dati dell'immagine viene inserito nella classe dal vostro strumento bundler quindi non può essere un problema con risoluzione di percorso. Non hai aggiunto l'immagine di sfondo al contenuto della domanda, quindi non so se ha alcune regioni trasparenti intorno ad esso.Dovresti provare a fare il div più grande per vedere se l'immagine inizia ad apparire. Dovresti anche impostare la ripetizione dello sfondo e la posizione dello sfondo a seconda di come è l'immagine di sfondo. – hazardous

Probabilmente ciò accade perché div.bg non ha uno height specificato. Per questo motivo, il suo height si adatta esattamente al contenuto del testo.

Le immagini di sfondo di qualsiasi dimensione non hanno alcun effetto sul dimensionamento dell'elemento padre. Se il tuo obiettivo è quello di poter vedere l'intera immagine, devi specificare uno height per div.bg che corrisponda all'altezza dell'immagine originale.

fonte

2016-11-03 00:56:21 sighrobot

Il tuo .bg div è attualmente di dimensione 0x0 px, questo è il motivo per cui l'immagine non viene visualizzata. Specificare una larghezza e un'altezza per vedere l'immagine.

Ad esempio:

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

O più preferibilmente usare 100% di avere l'intera forma immagine nel div.

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

Come nota a margine: assicurarsi che l'immagine di sfondo non è troppo grande e richiede molto tempo per caricare. Le grandi dimensioni dell'immagine di sfondo possono causare un'esperienza utente molto negativa. Prendi in considerazione l'uso di un'immagine png, una piccola immagine con l'attributo repeat o un svg.

fonte

2017-04-08 11:27:35 Yuval

background-size: contain;

Non so quale sia l'immagine, ma questo ridimensiona l'immagine per adattarla all'altezza di divisione corrente definita dal testo.

fonte

2017-09-09 03:56:33 dmartins

Provare a cambiare lo sfondo su background-image. Assegna inoltre alla classe bg un'altezza e una larghezza. Quindi, infine, specificare background-size probabilmente per coprire. Un esempio potrebbe essere simile

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

Questo dovrebbe funzionare come ho provato.

fonte

2017-09-09 04:31:00 hajorg

Posizionare la cartella img nella cartella pubblica

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

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

fonte

2017-10-04 16:16:14

React js css class background image not visible

risposta

Problemi correlati