• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

ReactJS - CSS nie ładuje background-image

Aruba Cloud PRO i VPS, Openstack, VMWare, MS Hyper-V
0 głosów
431 wizyt
pytanie zadane 3 września 2022 w HTML i CSS przez kingkushlee Gaduła (3,930 p.)
edycja 3 września 2022 przez kingkushlee

Witam, mam taki kod w css

.chart {
    padding: 4rem 0;
    background: url("../../resources/images/chart/background.png");
}

i takiego JSXa

import React from 'react';
import './chart.css';

// ZDJECIA
// import { default as background__image } from '../../resources/images/chart/background.png';

const Chart = () => {
  return (
    <section className="chart">
      dfsdggsd;ujl;jkl;jyioyioiy
    </section>
  )
}

export default Chart

Jednak po wejściu na stronę nie ładuje się zdjęcie z CSSa (div ma zawartość), w ogóle go nie widać. Dodam, że po zaimportowaniu zdjęcia i wstawieniu go bezpośrednio w JSX dalej nic się nie dzieje

import React from 'react';
import './chart.css';

// ZDJECIA
import { default as background__image } from '../../resources/images/chart/background.png';

const Chart = () => {
  return (
    <section className="chart" style={{ backgroundImage: `url(${background__image})` }}>
      dfsdggsd
    </section>
  )
}

export default Chart

struktura folderów:

src -> resources -> images -> chart -> background.png
    -> containers -> chart -> Chart.jsx, chart.css

Z góry dziękuję za pomoc

komentarz 3 września 2022 przez ScriptyChris Mędrzec (190,800 p.)

Czy nie pomyliłeś rozszerzeń tego obrazka? W strukturze folderów jest .jpg, a w kodzie używasz .png

komentarz 3 września 2022 przez kingkushlee Gaduła (3,930 p.)
Nie pomyliłem, tylko w strukturze folderu źle napisałem. Jest background.png
komentarz 3 września 2022 przez ScriptyChris Mędrzec (190,800 p.)
Czy w konsoli przeglądarki jest jakiś błąd? Może 404 z powodu błędnej ścieżki?
komentarz 3 września 2022 przez kingkushlee Gaduła (3,930 p.)

Nie ma, jest tylko taki

Unchecked runtime.lastError: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received

a przy interpretacji przez reacta w drugiej wersji kodu ze stylem umieszczonym wewnątrz sekcji import zadziałał bez błędów.

komentarz 3 września 2022 przez ScriptyChris Mędrzec (190,800 p.)

Co wyświetli console.log umieszczony pod importem obrazka?

import { default as background__image } from '../../resources/images/chart/background.png';

console.log('image:', background__image);
komentarz 3 września 2022 przez kingkushlee Gaduła (3,930 p.)
image: /static/media/background.0db9855dedc0b4bef739.png

 

komentarz 3 września 2022 przez ScriptyChris Mędrzec (190,800 p.)

Masz w projekcie plik /static/media/background.0db9855dedc0b4bef739.png ?

komentarz 3 września 2022 przez kingkushlee Gaduła (3,930 p.)

Nie, ale nie wiem też dlaczego tak się dzieje z importem tego stylu bezpośrednio w CSS. Podaję ścieżkę do pliku który istnieje, a interpreter zmienia to na inną

../../resources/images/chart/background.png

 

komentarz 4 września 2022 przez ScriptyChris Mędrzec (190,800 p.)

A pod jakim adresem w przeglądarce dostępna jest strona z komponentem Chart? Czy masz w strukturze projektu folder public lub build?

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
1 odpowiedź 482 wizyt
pytanie zadane 31 grudnia 2018 w HTML i CSS przez Strugaczka Początkujący (260 p.)
+1 głos
2 odpowiedzi 480 wizyt
0 głosów
2 odpowiedzi 187 wizyt
pytanie zadane 14 kwietnia 2021 w HTML i CSS przez Kubs Mądrala (5,210 p.)

90,401 zapytań

139,014 odpowiedzi

311,516 komentarzy

60,082 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...