在React Chrome扩展程序中从项目加载图像

I am trying to build a react chrome extension. I started off with the simple project found here. In its structure, the popup is contained in Modal.js and I would like to include an image in it which is contained in the project. However, to access that I must use chrome.runtime.getURL("image_file.png"), which I cannot access in Modal.js, but only in content.js. How should I get the image properly to Modal.js?

当按下浏览器操作按钮时，将全部激活，这会在content.js中调用此函数：

function main() {
  const extensionOrigin = 'chrome-extension://' + chrome.runtime.id
  if (!location.ancestorOrigins.contains(extensionOrigin)) {
    fetch(chrome.runtime.getURL('index.html'))
      .then((response) => response.text())
      .then((html) => {
        const styleStashHTML = html.replace(
          /\/static\//g,
          `${extensionOrigin}/static/`
        )
        $(styleStashHTML).appendTo('body')
      })
      .catch((error) => {
        console.warn(error)
      })
  }
}

The content of index.html is:

<div id="modal-window"></div>

但是当从获取中返回html时，它已在构建中扩展为：

<div id="modal-window"></div><script src="/static/js/runtime-main.0d1674f1.js"></script><script src="/static/js/2.021a85b4.chunk.js"></script><script src="/static/js/main.d80831e3.chunk.js"></script>

我不清楚如何调用index.js，但它是如何调用的，它在index.html中找到div并将其替换为模态对象，如下所示：

import React from 'react'
import ReactDOM from 'react-dom'
import Modal from './Components/Modal'

ReactDOM.render(<Modal />, document.getElementById('modal-window'))

我当前对modal.js的实现如下。显然，img src无法正常运行（需要使用chrome.runtime.getURL）：

import React from 'react'

const Modal = () => {
  return <img src="icon48.png" alt="icon48"></img>
}

export default Modal

我实际上如何从chrome.runtime.getURL获取图像src？