Importing images in CSS as background image gets [object Object]. about image-trace-loader HOT 2 CLOSED

Thank @EmilTholin. Works great.

By the way. This plugin is amazing. Great work :)

from image-trace-loader.

Hi @timbergus!

The reason why you get [object Object] in your CSS is because the result of importing an image with image-trace-loader is an object with a src and a trace property:

import { src, trace } from './image.png';

The main use of image-trace-loader is to have the traced outline as a placeholder until the main image is loaded, just like in the example in this repository.

If you are only interested in the trace, you could use it as an inline style in React instead:

import { trace } from './image.png';

const MyComponent = () => <div style={{ backgroundImage: `url(${trace})` }}></div>;

If you want a standalone traced image, you could use Potrace directly.

from image-trace-loader.