why the original web page did not show the google chrome extension inserted html image

Question

I am tried to insert a vue 3 component into the original web from google chrome extension v3 script, now the css and html was insert successfully. What make me confusing is that the inserted html did not show the images from google chrome extension, this is the css define the image path in the vue 3 componnet:

<style lang="scss" scoped>

.reddwarf-btn-icon{
  width: 18px;
  height: 28px;
  background-image: url('chrome-extension://__MSG_@@extension_id__/resource/image/logo.png');
  background-size: contain;
}

</style>

and this is the output of the css when showing in the original web:

.reddwarf-btn-icon[data-v-6bc385e0] {
    width: 18px;
    height: 28px;
    background-image: url(chrome-extension://alepiijaddmmflnaibdpolcgglgmkpdm/resource/image/logo.png);
    background-size: contain;
}

to my surprise, the original web did not show the google chrome extension insert html background image which was specify in the inserted html css. I could successfully open the image in google chrome browser from the css background image link, means that the css specified image path was right, why did not shows the image specified by the inserted html css? I have already add the image resource path config like this in the google chrome extension manifest v3 json config:

"web_accessible_resources" : [{
    "resources": [
      "/bundle/*.woff" ,
      "/content-scripts/web/embed/*",
      "/pdf-viewer/*",
      "/resource/*"
    ],
      "matches": ["<all_urls>"]
  }]

what should I do to fix this problem? Am I missing something? this is the view:

I tried to set the background color, it works.