CODEWITHSUNDEEP
cssreactjsnext.jsstyled-components
ronak patel
ronak patel

Reputation: 418

Next.js return (failed)net::ERR_UNKNOWN_URL_SCHEME for imported images

I am using Next.js + styled-components + TypeScript. I want to use background-image: url() where I import image from assets folder present inside src folder. In network tab, when I look for images, it says in status:

(failed)net::ERR_UNKNOWN_URL_SCHEME and the url is src:/_next/static/image/public/right.e158775f9c1cf296e36177bfb86a5ced.svg;height:32px;width:32px;

Which does not display image.

Assets folder is present in /src/assets/left.svg.

If I import the same image in index.tsx file and render it in Image component it works fine.

// 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;
  }
`;

Upvotes: 2

Views: 2420

Answers (2)

valerii15298
valerii15298

Reputation: 869

Instead of moving all our images to public folder you can just use

background-image: url(${Left.src});

This is what worked for me:)

Note: Actually Left will be an object if you try to console.log it, it will be something like:

{
blurDataURL: "/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fleft.475f00e5.png&w=8&q=70"
height: 1321
src: "/_next/static/media/left.475f00e5.png"
width: 1321
}

Upvotes: 2

RobLjm
RobLjm

Reputation: 429

That is because in Nextjs, static files are served from the 'public' folder in the root directory. I suggest you store the images in this folder and reference them with a "/"

eg background-image: url('/Right');

Upvotes: 2

Related Questions