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. проверьте ещё корректность относительности пути.

→ Ссылка