GrapesJS set link "src" placeholder onLoad

Question

I implemented a small GrapesJS editor that allows to edit Django/Jinja2 templates. GrapesJS by default is trying to GET the image src of my element:

<a href="{{product_url}}" target="_blank"><img src="{{image_url}}" width="130"/></a>

The request happens everytime I load the HTML template into the GrapesJS editor: http://localhost:8000/%7B%7Bimage_url%7D%7D 404 (Not Found)

GrapesJS editor though works fine even with this 404 call. But I would like to handle the request to the image. So instead of GrapesJS making a default call to http://localhost:8000/%7B%7Bimage_url%7D%7D I would like to render a placeholder image let's say: https://placekitten.com/200/300

What I currently have:

editor = grapesjs.init({
    container: '#gjs',
    assetManager: {},
});

editor.setComponents('<a href="{{product_url}}" target="_blank"><img src="{{image_url}}" width="130"/></a>');

// querySelector is returning an empty Array of Nodes
editor.on('load', () => {
    const body = editor.Canvas.getBody().ownerDocument;
    body.querySelectorAll('a').forEach(function(el) {
        let link = el;
        link.setAttribute('src', "http://via.placeholder.com/350x150");
    });
    editor.store();
});