Hi, I'm trying to use your package together with [email protected], but I'm getting an error error - ./public/assets/handshake.png TypeError: unsupported file type: undefined (file: undefined).

My next.config.js where I push webpack config:

const { i18n } = require("./next-i18next.config");

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n,
  trailingSlash: true,
  webpack(config) {
    config.module.rules.push(
      {
        type: "asset",
        resourceQuery: /url/,
      },
      {
        test: /\.svg$/,
        use: {
          loader: "@svgr/webpack",
          options: {
            svgoConfig: {
              plugins: [
                {
                  name: "preset-default",
                  params: {
                    overrides: {
                      mergePaths: false,
                    },
                  },
                },
                "prefixIds",
              ],
            },
          },
        },
      },
      {
        test: /\.(png|jpe?g|gif|jp2|webp)$/,
        use: [
          {
            loader: "image-trace-loader",
          },
        ],
      }
    );

    return config;
  },
  images: {
    domains: ["images.unsplash.com"],
  },
  async redirects() {
    return [
      {
        source: "/polityka-prywatnosci",
        destination: "/privacy-policy",
        permanent: true,
      },
    ];
  },
};

module.exports = nextConfig;

This is an awesome package! Thank you for building this, Emil.

It would be great to have an option that outputs the svg trace to a file so that I can render it server-side (and not need to wait for javascript to load and execute on the client for example).

I'll have a look at implementing this myself, but I'm not very familiar with webpack, so any tips would be much appreciated!

It's my code

const {book} = this.props
const urlImage = `../../../../..${book.image}`
const image = require(urlImage)

I can next issue http://prntscr.com/hsknvf .
Uncaught Error: Cannot find module "."
at webpackMissingModule

How i can to do dynamic import?

Hey Emil, fantastic work with the project. It was so awesome I couldn't wait to make a working example out of it. You can check it out here.

It would be awesome if you could add it's reference in your README.
Here's the github repo link- https://github.com/itaditya/Trace-Lazy-Load.
This would also close #2

Hello,

Thanks for the great project! And we use it in our project, it works fine if images not so much. And in the production env, there are around 10000+ images. We try to build the project using webpack and it throws out out of memory error. So did you test the image-trace-loader performance?

Thanks

The version of svgo in this project has a vunerability in it's js-yaml dependencies. This has been resolved in svgo 3.13.0+. Please update the svgo dependency verion.

Hi @EmilTholin,

I'm not sure if this is really a bug or that I don't know how to use the plugin, but despite it works fine when importing images in React, when I try to import images in CSS:

main {
    background-image: url('~images/star.png');
}

The result I get in the developer's tools is that the content of the URL is an object:

background-image: url([object Object]);

Is there any way to get in CSS the src of the image? Do I need to import images for CSS in a different way? How I can do it?

Thanks in advance.

Regard

Maybe will be more productive you show a working sample of your project

Hi, I'm trying to use this package in a Next.JS enviroment with typescript and I'm getting this error:

Error: Cannot find module 'file-loader'

My page is

export default function test() {
    return (
        <div>
            <LazyLoadingImage src="../../public/star-1.png" alt="star" width="50px" height="50px" className=""/>
        </div>
      )
}

and my component is:

interface LazyImageProps{
    src: string,
    alt?: string,
    width?: string,
    height?: string,
    className?: string,
}

function LazyLoadingImage({src, alt, className, width, height}: LazyImageProps){
    const [imageLoaded, setImageLoaded] = useState(false);

    // src image and trace image url
    // const { source, trace } = require(`./${src}`);
    const { source, trace } = require(`../../public/star-1.png`);
    return (
        <div className="imageLoader">
            <img 
                src={`./renato.png`} alt={alt} 
                loading="lazy" className={"real-img " + className} 
                width={width} height={height}
                style={{
                    opacity: imageLoaded ? "1" : "0",
                }}
                onLoad={() => setImageLoaded(true)}
            />
            
            <img
                style={{
                    opacity: imageLoaded ? "0" : "1",
                }}
                src={`./renato.png`}
                alt={alt}
            />
        </div>
    )
    
};

I decided to use this image ../../public/star-1.png for testing.

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
  }

});

Anyone know what should I do to fix it?

Hi,

Wondering if anyone has used this loader with CDN images. My images are on Cloudinary and S3 and I was wondering if there is a use-case with this loader.

Cheers!

Hey!

First of all, thank you a lot for this little loader, it's quite useful and well coded, I will probably enjoy making a PR here and there ;)

Safari 11 leaks a lot while trying to process Base64 string pictures and vectors. It sucks because if you have a lot of pictures to load (it's kind of the point of lazy loading), then safari gets a serious heart attack loading your web app.

I guess that we could avoid this problem by setting a new option to serve a file as well as the Base64 string, and by adding a constructor to the exported object who would detect which browser is used if executed on the client (for SSR compatibility) and would change the value of the trace retrieved by the app to a file URL accordingly.

The option would be an array of strings useFileUrlOn who could be set, for example, to ['safari', 'ie'] in order to use file URL instead of data URI on Safari and IE8,9,10,11...

Does it sound good ?

The readme and example both show a limit option but it's not explained anywhere and doesn't appear in the source either:

https://github.com/EmilTholin/image-trace-loader/search?q=limit&unscoped_q=limit

Should it be removed, or documented?