brandonklotz/next-image-trace-loader

Trace images as SVGs as they load.

Next Image Trace Loader

Display a SVG traced image while your images lazy load for NextJS projects.

A wrapper of image-trace-loader and next/image

Was truly inspired by Gatsby sites that use Image Trace and wanted to achieve the same look in my Next projects.

Works out of the box with Next 10, if you need more customization you may want to copy the source and import the dependencies image-trace-loader, file-loader, and url-loader.

Example

View site: https://next-image-trace-loader.vercel.app/

Getting started

Install the component to your project.

yarn add next-image-trace-loader

# or

npm install next-image-trace-loader

Update your next.config.js to trace images as SVGs.

// next.config.js

const tracedImages = {
  test: /\.(png|jpe?g|gif|jp2|webp)$/,
  use: [
    {
      loader: 'image-trace-loader'
    }
  ]
}

module.exports = {
  webpack: (config, options) => {
    config.module.rules.push(tracedImages)
    return config
  }
}

Usage in your project

Basic Usage:

import ImageTrace from "next-image-trace-loader"
import ringPlanet from '../public/planet-1.png'

export default function Home() {
  return (
    <>
      <ImageTrace
        src='/planet-1.png'
        trace={ringPlanet.trace}
        nextImageProps={{width: 800, height: 400}}
      />
    </>
  )
}

When using layout=fill with next/image we need to send in width and height properties that will be styled on the divs that wrap the images.

import ImageTrace from "next-image-trace-loader"
import ringPlanet from '../public/planet-1.png'

export default function Home() {
  return (
    <>
      <ImageTrace
        src='/planet-1.png'
        trace={ringPlanet.trace}
        width='800px'
        height='400px'
        nextImageProps={{layout: 'fill'}}
      />
    </>
  )
}

next-image-trace-loader's Issues

Cannot drag or select full images

Hello, thanks so much for making this! I was trying to stitch together my own solution for trace-loading images + Next image and stumbled upon this. I like that it's easy to pop in on top of NextJS's image processing selectively.

When dragging or selecting an that has gone through next-image-trace-loader it drags out what appears to be the SVG, not the final image. You also cannot drop the image/SVG anywhere that I tested (to a new tab, to the desktop etc).

To Reproduce
Steps to reproduce the behavior:

1. Go to any image rendered with next-image-trace-loader
2. Drag the image out and see what it gives you

Expected behavior
The final image (not the loader SVG) should be able to be dragged/selected.
Screenshots
https://user-images.githubusercontent.com/36751136/107604867-1ab95f00-6c7d-11eb-851f-fb8bf383b2c5.mp4

Desktop (please complete the following information):

• OS: macOS 10.15.7
• Browser Firefox 86.0b7 and Chrome 88.0.4324.150

Smartphone (please complete the following information):
N/A

Type error

Describe the bug
A clear and concise description of what the bug is.

I tried use to default package image-trace-load, but I wasn't able to use it in next. Then I found yours, but I'm getting a very strange bug

Even using your image, and your Tag declaration my page gives me this error:

./public/star-1.png
TypeError: unsupported file type: undefined (file: undefined)

I'm using Typescript with next js

here is my next.config:

/** @type {import('next').NextConfig} */
const withPWA = require("next-pwa");

const tracedImages = {
  test: /\.(png|jpe?g|gif|jp2|webp)$/,
  use: [
    {
      loader: 'image-trace-loader'
    }
  ]
};

module.exports = withPWA({
  pwa: {
    dest: "public",
    register: true,
    disable: process.env.NODE_ENV === 'development',
    skipWaiting: true,
  },
  reactStrictMode: true,
  images: {
    domains: ['codingideas.vercel.app'],
  },
  webpack: (config, options) => {
    config.module.rules.push(tracedImages)
    return config
  }

});