Currently utilizing Next.js with styled-components and TypeScript. I am trying to implement background-image: url() by importing an image from the assets folder located within the src directory. However, when inspecting the network tab, the status for images shows:
(failed)net::ERR_UNKNOWN_URL_SCHEME with the URL src:/_next/static/image/public/right.e158775f9c1cf296e36177bfb86a5ced.svg;height:32px;width:32px;
This results in the image not being displayed properly.
The assets folder can be found at /src/assets/left.svg.
If I import the same image into the index.tsx file and display it using the Image component, everything works as expected.
// styles.tsx
import styled from 'styled-components';
import Left from '../../assets/left.svg';
import Right from '../../assets/right.svg';
export const SwiperWrapper = styled.div`
margin-top: 2.5rem;
position: relative;
.swiper-position {
position: static !important;
}
.swiper-button-next:after,
.swiper-button-prev:after {
content: '';
}
.swiper-button-prev {
background-image: url(${Left});
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center;
-webkit-tap-highlight-color: transparent;
top: 100%;
}
.swiper-button-next {
background-image: url(${Right});
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center;
-webkit-tap-highlight-color: transparent;
}
`;