ReactJS - CSS nie ładuje background-image

Question

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

Comments

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

---

Nie pomyliłem, tylko w strukturze folderu źle napisałem. Jest background.png

---

Czy w konsoli przeglądarki jest jakiś błąd? Może 404 z powodu błędnej ścieżki?

---

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.

---

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

---

image: /static/media/background.0db9855dedc0b4bef739.png

 

---

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

---

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

 

---

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