Problem przy korzystaniu z Webpacka

Question

Witam , przy tworzeniu projektu z reactem i korzystając z webpacka napotkałem na pewien problem, polega on na tym , że w plikach scss korzystam z metody:

background-image: url('../../public/assets/flag.svg');

Użycie tej metody powoduje , że przy kompilacji kodu poprzez webpack to otrzymuje coś takiego jak na screenie

Wszystko fajnie działa , ale gdy to tego użyje file-loadera do zdjęć, tak jak na screenie:

 

Użycie file-loadera powoduje , że link do tego zdjęcia tak jak na pierwszym screenie się nie zmienia , ale z jakiegoś powodu zdjęcie się nie wczytuje... nie mam pojęcia z jakiego powodu , doszedłem do tego , że właśnie błąd występuje tylko kiedy używam file-loadera do zdjęć. W codepen załączam całą konfiguracje webpacka. Z góry dzięki za pomoc :)

https://codepen.io/krzysi0x2/pen/VwWLzbR?editors=1010

Answer 1

Witaj, mógłbyś wstawić całą strukture projektu? Czy podczas bundlingu występuje jakiś błąd? Błąd ten występuje nawet wtedy gdy w url umieszczasz adres url do obrazka z internetu(np "

https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png

")?

Pamiętam, że kiedys miałem podobny problem, jego przyczyną było to, że do background-image przekazywałem ścieżke prowadzącą do tła, ale względem pliku scss, a nie względem dist(z tego co widze w twoim przypadku build), mając strukture plików taką jak poniżej url, który był błędny wyglądał tak: ./../../assets/pobrane.jpg - czyli od _base.css(bo to w nim stosowałem background-image) wychodziłem w góre do assets/pobrane.jpg, gdy zmieniłem url na: ./../assets/pobrane.jpg" czyli wychodziłem od folderu dist(w którym są zbundlowane pliki) do assets/pobrane.jpg wszystko działało. Jednak gdy przekazywałem pierwszą ścieżke webpack wypluwał mi błąd "Module not found: Error: Can't resolve './../../assets/pobrane.jpg", ty nic o błędzie nie pisałeś, więc jest to troche slepy strzał.

 

 

Szukając odpowiedzi w innych źródłach niż własne doświadczenie, znalazłem wątek na stackoverflow(click), który wydaje sie opisywac twój problem.

Comments

Dla objaśnienia rozrysowałem to w paincie wraz ze strukturą plików.

link do zdjęcia: https://ibb.co/q100wKh , bo tutaj mało widać.

Jak widać file-loader generuje dodatkowo w strukturze 2 takie same pliki, tylko nazywa je name: '[name]-[contenthash].[ext]', tak jak podano w konfiguracji, jednak te pliki i tak są ignorowane i nie są używane , bo jak widać na screenach url jest taki sam i dodatkowo widać , że pliki z urla znajdują się w strukturze plików , a mimo wszystko jest błąd.

1. Użycie ścieżki do jakiegoś zdjęcia z internetu nie powoduje problemu ponieważ , ten plik w takim przypadku nie jest objęty file-loaderem wiec nie ma problemu.

2. Nie mogę zmienić ścieżki url w scss ponieważ w takim przypadku wypluwa mi błąd , tak więc obecna ścieżka jest poprawna.

 

---

Niestety nie jestem w stanie pomóc, jedyne co moge doradzić, to wpisywanie w google fraz typu "file-loader background-image doesn't work", "webpack file-loader does not load background image" itp. Jak znajdziesz rozwiązanie, to jeżeli możesz opisz je, nie ukrywam, że troche mnie twój problem zainteresował. No i jak masz ten projekt gdzies na githubie, to podlinkuj, sklonuje i coś popróbuje

---

Nie pisałbym tutaj na forum gdybym wcześniej nie zrobił resarchu i nie próbował czegoś sam zrobić. Niby coś jest na necie , ale nie daje rezultatu jaki chciałbym uzyskać, może coś źle robię... Liczyłem na to , że może ktoś miał podobny problem i jest w stanie mi pomóc. Dzięki za zainteresowanie.