title: Next.js return (failed)net::ERR_UNKNOWN_URL_SCHEME for imported images
body: <p>I am using Next.js + styled-components + TypeScript. I want to use <code>background-image: url()</code> where I import image from assets folder present inside src folder. In network tab, when I look for images, it says in status:</p>
  <blockquote>
  <p>(failed)net::ERR_UNKNOWN_URL_SCHEME and the url is
  src:/_next/static/image/public/right.e158775f9c1cf296e36177bfb86a5ced.svg;height:32px;width:32px;</p>
  </blockquote>
  <p>Which does not display image.</p>
  <p>Assets folder is present in <code>/src/assets/left.svg</code>.</p>
  <p>If I import the same image in <code>index.tsx</code> file and render it in <code>Image</code> component it works fine.</p>
  <pre><code>// 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;
    }
  `;
  </code></pre>