Jimp - URIs are returned from the function but the images are not rendered in the <img>'s src

Question

I am coding in Svelte and use jimp to blur the image before displaying. However, I successfully blur and return the images' URIs (logged and had the URIs displayed in the console), but the images are not render where i call the function in the <img> src .

Specifically:

I have a processImage function:

const processImage = async imgMeta => {

const buf = Buffer.from(imgMeta.replace(/^data:image\/\w+;base64,/, ""), 'base64');

Jimp.read(buf, (err, image) => {
  if (err) throw err;
  else {
    image.blur(20)
    .getBase64(Jimp.AUTO, function (err, newImageURI) {          
      return newImageURI;
  })}})

And, i call it in the :

<img src={processedImage} alt="preview" />

But the image is not rendered. This is odds, as i expected it should work.

Answer 1

There was an error with the value returning from a callback function. The newImageURI will not be returned.

Await synchronous and getBase64Async from Jimp are helpful solutions:

newImageURI = await image.blur(20).getBase64Async(Jimp.AUTO);
return newImageURI;

And the function call in the body remains unchanged:

{#await processImage(item.files[0].preview)} 
<p>...waiting</p> 
{:then processedImage}
<img src={processedImage} alt="preview" /> 
{/await} 

I got this run.