在 Vite 和 React 中构建过程后资产未显示

Question

运行时

npm run build

我在 src/assets/... 下的图片在 dist 目录/生产版本中不可用。所以网站上没有显示。在开发模式下它肯定可以工作。

关于如何在构建后使它们可用有什么想法吗？

另外，在我的 VSCode 终端中，我收到以下错误

“GET /src/assets/store2.webp”错误（404）：“未找到”

    <div className="onah">
      <img src="src/assets/Deal-2.webp" 

我附上了一些屏幕截图以便更好地理解。我什至必须配置我的 vite.config

Answer 1

您应该导入资产，以便 vite 可以管理它并为生产构建它，而不是：

  <div className="onah">
     <img src="src/assets/Deal-2.webp" 

你应该做：

  import deal from "src/assets/Deal-2.webp";

  <div className="onah">
    <img src={deal} ... />