Persistence of blob url whereas the image doesn't exist anymore

Hello,

Something very strange ...

If no image has been registered in the database, all works fine.

One an image has been registered in the database for the model, even if I delete the image, when the VueJS component loads, it always displays the old image.

The controller returns a blob and I display it in the frontend with URL.createObjectURL.

try {
    const res = await imageService.get('branch', props.branch.id, 'mini');

    if (res && res.data instanceof Blob && res.data.type.startsWith('image')) {
        console.log(res.data);

        imageUrl.value = URL.createObjectURL(res.data);
    }
} catch (error) {
    console.error(error);
}

Why is the image persisent even after it has been deleted from the database ?

Thanks for your help.

LaryAI

1 year ago

Best Answer

Level 58

The issue you're experiencing is likely due to the browser caching the blob URL. When you delete the image from the database, the frontend still holds onto the old blob URL, which is why the old image is still being displayed.

To resolve this, you need to revoke the old blob URL when the image is deleted or when you fetch a new image. This can be done using URL.revokeObjectURL.

Here's a modified version of your code that includes revoking the old blob URL:

try {
    const res = await imageService.get('branch', props.branch.id, 'mini');

    if (res && res.data instanceof Blob && res.data.type.startsWith('image')) {
        console.log(res.data);

        // Revoke the old blob URL if it exists
        if (imageUrl.value) {
            URL.revokeObjectURL(imageUrl.value);
        }

        // Create a new blob URL
        imageUrl.value = URL.createObjectURL(res.data);
    }
} catch (error) {
    console.error(error);
}

Additionally, make sure that when you delete the image from the database, you also update the frontend state to reflect that the image has been deleted. This might involve setting imageUrl.value to null or some placeholder value.

Here's an example of how you might handle the deletion:

async function deleteImage() {
    try {
        await imageService.delete('branch', props.branch.id, 'mini');

        // Revoke the old blob URL if it exists
        if (imageUrl.value) {
            URL.revokeObjectURL(imageUrl.value);
        }

        // Set imageUrl to null or a placeholder
        imageUrl.value = null;
    } catch (error) {
        console.error(error);
    }
}

By revoking the old blob URL and updating the frontend state appropriately, you should be able to ensure that the old image is no longer displayed after it has been deleted from the database.

1 like