In an electron APP, how to retrieve a file's thumbnail and show it on the html page¶

Retrieve a file's thumbnail¶

We can retrieve a thumbnail with nativeImage.createThumbnailFromPath.

const { nativeImage } = require('electron')


const getThumbnail = async (filePath) => {
    const img = await nativeImage.createThumbnailFromPath(filePath, {width: 256, height: 256})
    return img.toDataURL()
}

nativeImage.createThumbnailFromPath returns a NativeImage instance. It cannot be used directly by the html page. So we need to call toDataURL method. toDataURL returns the data URL of the image which can be used directly by the image html element.

show thumbnail on the html page¶

Suppose that the return value of getThumbnail is called imgSrc in the renderer process. We will pass it to the src attribute of an image element.

<img id="imageid"/>
<script>
    // const imgSrc = await getThumbnail('/path/to/img')
    document.getElementById("imageid").src=imgSrc;
</script>