Parcel构建SPA部署后SVG精灵图标及指定图片不显示问题求助

大家好，我现在碰到个棘手的问题，想请各位帮忙看看！我用Parcel构建我的单页应用后，不管是部署到服务器还是本地用live-server打开dist文件夹，SVG精灵图标和一张兜底用的JPG图片都没法正常显示，但在本地开发环境（parcel start启动的dev server）里一切正常，完全没这个问题😭

具体现象 #

• SVG精灵图标：在浏览器控制台里能看到对应的DOM元素，但它的宽高被设成了0x0，完全看不到图标
• 兜底海报图：当API返回没有图片的内容时，本该加载这张通用海报，但现在也加载不出来；有意思的是，同目录下的logo图片却能正常显示
• 更奇怪的是，我的首页HTML是静态写的（不是JS动态渲染的），里面用的SVG图标也同样出问题

我的项目情况 #

这是一个用原生JS模块、HTML、Sass开发的单页应用，用Parcel做打包工具。SVG精灵和那张兜底海报都是从img目录导入的，页面的大部分HTML内容是用JS动态生成的。

相关代码片段 #

资源导入（JS模块里的代码）

import icons from "url:../../img/sprite.svg";
import poster from "url:../../img/background/generic-poster.jpg";

package.json的脚本配置

"scripts": {
    "clean:output": "rimraf dist",
    "start": "parcel index.html",
    "build": "parcel build index.html --dist-dir ./dist"
  },

静态HTML里的SVG使用（首页的部分代码）

<header class="header">
            <a class="header__logo--link"><img src="src/img/popcorn-2.png" class="header__logo" alt="logo" />
            </a>
            <form class="search">
                <input type="text" class="search__field" placeholder="Your movie awaits..." />
                <button class="btn btn--search">
                    <div class="svg__icon-box">
                        <svg class="svg__icon svg__icon--search">
                            <use href="src/img/sprite.svg#icon-search"></use>
                        </svg>
                    </div>
                </button>
            </form>

            <button class="btn btn--watchlist">
                <div class="svg__icon-box">
                    <svg class="svg__icon svg__icon--bookmarks">
                        <use href="src/img/sprite.svg#icon-bookmarks1"></use>
                    </svg>
                    <span>Watchlist</span>
                </div>
            </button>
        </header>

补充截图说明 #

• 截图1：浏览器元素审查里能看到SVG元素，但宽高显示为0x0，没有任何可见内容
• 截图2：本该显示兜底通用海报的位置，现在没有加载出图片（这张图是API无返回时的备用图）

我怀疑是不是Parcel的构建过程哪里配置错了？或者是资源路径在构建后出了问题？但同目录的logo能正常加载，这一点又让我搞不懂了... 有没有朋友碰到过类似的问题，或者能给我一些排查方向？

备注：内容来源于stack exchange，提问作者NiftyKid