图像以生产模式显示，但不以开发模式显示

Question

运行生产命令时，将生成文件并按预期显示SVG。不幸的是，当我运行dev命令时，网站打开，图像丢失，控制台中出现404错误。 文件目录如下所示

-dist
  -assets
  -index.html
  -main.css
  -main.js
  -vendor.js
-node_modules
-src
   -assets
   -css
   -js
      -model
      -view
         -particularView.js <-- a
     -index.js
   -template.html <-- b
-webpack.common.js
-webpack.dev.js
-webpack.prod.js

particularView.js（a）中的代码用于在运行时编辑template.html（b）中的元素，如下所示。

    export const renderImage = (imageCode) =>
        document.querySelector("#main__container").innerHTML = 
        "<img class="main__image" src="./assets/${imageCode}.svg" alt="image">`;"
        }

图像存储在dist和src的资产文件夹中。此外，template.html文件和发行版的index.html文件相对于相应资产文件夹都位于同一位置。我的问题是两个目录是否是如此相似，为什么为什么我可以在生产版本中看到SVG，但在开发版本中却看不到？