Блог

У меня возникли проблемы с импортом моего изображения для CSS. Я импортировал изображение в качестве теста, и оно работает при его использовании в теге img с использованием src={furnitureBG}.

Я проследил за документами и импортировал изображение, а затем использовал путь в качестве значения url(«). Однако изображение не отображается, и нет сообщения об ошибке.

Я знаю, что путь правильный, потому что, когда я использую код

 lt;img src={furnitureBG} /gt;  

изображение, которое я желаю, визуализируется. Мне просто интересно, почему это не работает со следующим кодом для фона CSS.

 import furnitureBG from '../images/furniture-bg-7.png';  const Container = styled.div`  height: 100vh;  width: 100vw;  background: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)), url('../images/furniture-bg-7.png'); `  

Вы можете использовать URL(${furnitureBG?.src}) для визуализации изображения с помощью стилизованного компонента.

 import furnitureBG from '../images/furniture-bg-7.png';   const Container = styled.div`  height: 100vh;  width: 100vw;  background: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)), url(${furnitureBG?.src});  `  

Вы можете переместить /images папку в public папку:

App.js

 const Container = styled.img`  background-image: url("/images/asdf.png");  width: 100vw;  height: 100vh; `;  function App() {  return (  lt;div className="App"gt;  lt;Container /gt;  lt;/divgt;  ); }  

Структура каталогов:

 - project  - public  - images  - asdf.png  - src  - App.js