角度应用程序图像未从浏览器中的资产文件夹加载所有文件夹

Posted 2023-03-13

【中文标题】角度应用程序图像未从浏览器中的资产文件夹加载所有文件夹

【英文标题】：angular app image not loading all folders from asset folder in the browser

【发布时间】：2021-09-28 04:21:51

【问题描述】：

所以我有一个 Angular 应用程序，其中我有资产文件夹，其中我有几个其他文件夹。令人惊讶的是，浏览器中加载的文件夹很少，很少有。在 angular.json 我提到了资产文件夹，但仍有一些文件夹没有加载。具体来说，mix-box 文件夹，industrial-silencer 文件夹正在加载，而不是其他文件夹。同样在模板中，我将路径设为 src='assets/images/product/......' 并根据请求引发 404 错误

非常感谢任何帮助。

"assets": [
              "src/favicon.ico",
              "src/assets",
              "src/assets/images/product/transition"
            ],

【参考方案1】：

将资产更改为如下所示。它会将资产的所有文件/文件夹复制到您的 dist 文件夹

"assets": [
     "src/favicon.ico",
     
          "glob": "**/*",
          "input": "src/assets",
          "output": "/assets/",
     
],
          

现在，将图像引用更新为类似的内容

<img src="/assets/images/product/weather-hood/image.jpg" ...>

图片应该加载

【讨论】：

嗨，图像文件夹已经在 dist 文件夹中，但不知何故它没有在浏览器中加载。仍然尝试使用您建议的更改，但没有运气。此外，如果您看到图像 weather-hood 文件夹正在加载。过渡、轻工业消音器等未在浏览器中加载

我认为您的脚本不会复制整个资产文件夹。请注意，缺少过渡文件夹。你能访问这些文件吗？ localhost:4200/assets/images/VAW-Logo-Website-white.png 或 localhost:4200/assets/images/product/transition/0.JPG 如果不是，则副本不起作用。检查 dist 文件夹是否所有内容都在那里并正确复制

我可以访问 localhost:4200/assets/images/VAW-Logo-Website-white.png 但不能访问过渡文件夹图像，这是我的问题，我必须在这里发布这个问题。我看到 dist 文件夹中的所有内容（资产文件夹中的所有文件夹），但我不确定它为什么会在浏览器中加载。如果我通过输入图像的 URL 直接请求图像，它会重定向到我的主页。

VAW-Logo-Website-white.png 加载是因为它在 dist 文件夹中可用，这表明您的处理是正确的。其他人没有加载 bcos，因为您使用的 URL 路径无法访问它们，或者构建没有正确复制。检查路径是否确实正确。运行命令npm run build:dev。并检查您的 ./dist 文件夹中的内容。它会告诉你正确的路径是什么