React не видит путь к изображению
Пытаюсь сделать фоновое изображение, но не могу импортировать локальное фото... Я уже и в одну папку все перенес (что б с путем не запутаться) и через папку public пробовал, и через require пробовал... Ну не видит изображение и все тут...
import styled, { createGlobalStyle, css } from 'styled-components';
import bgImage from '../layout/1.jpg'
export const Container = styled.div`
max-width: 1280px;
width: 100%;
margin: auto;
`;
const Background = styled.div`
background-image: url(${bgImage});
`
Может нужно еще какой модуль установить? Вот все что установлено...
{
"name": "portfolio_nextjs",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build && next export",
"start": "next start"
},
"dependencies": {
"file-loader": "^6.2.0",
"next": "10.2.3",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-icons": "^4.2.0",
"react-router-dom": "^5.3.0",
"styled-components": "^5.3.0",
"styled-normalize": "^8.0.7"
},
"devDependencies": {
"url-loader": "^4.1.1"
}
}
Ответы (1 шт):
Автор решения: Владислав
→ Ссылка
Попробуйте фото вставлять не ссылкой, а сразу строкой. То есть, вместо:
url(${bgImage})
напишите:
url("../layout/1.jpg")
P.S. проверьте ещё корректность относительности пути.
