Javascript Vue js在创建img标记时检测

我正在尝试将图像中的所有主机名更改为一个新域。我已经创建了一个指令，但后来我意识到我不能将其应用于所见即所得编辑器创建的内容。是否有任何方法可以检测当前正在渲染的任何图像标记？即使是动态图像。或者，如果有一种方法可以将我的自定义指令应用于页面上的所有图像，即使它们是作为post内容从数据库中获取的。 这是我的自定义指令，我也在Nuxt.js上

import Vue from 'vue';

Vue.directive('image', {
    bind: function(el, binding, vnode){
        if(el.src){
            let parse = new URL(el.src);
            //url processing and stuff
        }else{
            if(binding.expression == 'post'){
                el.src = process.env.backendURL + '/storage/posts/default.png';
            }
        }
        console.error(el.src);
    }
})

---

在主布局文件default.vue中进行了一些研究并创建了几个函数

  const targetNode = document;

        const config = { attributes: true, childList: true, subtree: true };

        const setDefaultImg = el => {
            if (el.dataset.imageType == "user") {
            } else {
                el.src = process.env.backendURL + "/storage/posts/default.png";
            }
        };

        const setImageHref = el => {
            if (el.src) {
                let parse = new URL(el.src);
                if (parse.hostname === "newinfo.am") {
                    let backend = new URL(process.env.backendURL);
                    parse.hostname = backend.hostname;
                }

                if (process.env.NODE_ENV === "development") {
                    parse.protocol = "http";
                }

                el.src = parse.href;
            } else {
                setDefaultImg(el);
            }
        };

        const callback = function(mutationsList, observer) {
            mutationsList.forEach(function(mutation) {
                [].slice.call(mutation.addedNodes).forEach(function(addedNode) {
                    if (addedNode.hasChildNodes()) {
                        addedNode.getElementsByTagName("img").forEach(el => {
                            
                            el.addEventListener("error", event => {
                                setImageHref(el);
                                setDefaultImg(event.target);
                            });
                        });
                    } else if (addedNode instanceof HTMLImageElement) {
                        
                        addedNode.addEventListener("error", event => {
                            setImageHref(addedNode);
                            setDefaultImg(event.target);
                        });
                    }
                });
            });
        };

        const observer = new MutationObserver(callback);

        observer.observe(targetNode, config);

到目前为止效果很好。

您可以尝试使用