• 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

VPS Starter Arubacloud
0 głosów
695 wizyt
pytanie zadane 3 września 2022 w HTML i CSS przez kingkushlee Gaduła (3,960 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,190 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,960 p.)
Nie pomyliłem, tylko w strukturze folderu źle napisałem. Jest background.png
komentarz 3 września 2022 przez ScriptyChris Mędrzec (190,190 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,960 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,190 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,960 p.)
image: /static/media/background.0db9855dedc0b4bef739.png

 

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

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

komentarz 3 września 2022 przez kingkushlee Gaduła (3,960 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,190 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ź 628 wizyt
pytanie zadane 31 grudnia 2018 w HTML i CSS przez Strugaczka Początkujący (260 p.)
+1 głos
2 odpowiedzi 866 wizyt
0 głosów
2 odpowiedzi 308 wizyt
pytanie zadane 14 kwietnia 2021 w HTML i CSS przez Kubs Mądrala (5,190 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...