Angular中添加背景图片出现404错误的解决办法

问题根源 #

你写的/frontend/src/assets/logo是本地文件系统的绝对路径，而Angular应用运行时，浏览器是从应用的根URL访问资源，不是直接读取本地目录；同时你还缺少了图片的后缀名（比如.png、.jpg），这两个原因共同导致了404错误。

解决步骤 #

• 修正图片路径和后缀
  Angular中assets文件夹会被打包到应用根目录下，直接用相对应用根的路径即可，同时要带上完整的图片文件名（含后缀）。比如你的图片是src/assets/logo.png，那么CSS里的路径应该写成：

  background-image: url('assets/logo.png');
  

  或者带根路径前缀的写法：

  background-image: url('/assets/logo.png');
  

• 验证Assets配置（可选）
  检查angular.json文件中的assets配置项，确保src/assets被包含在内（默认已配置），这样构建时图片才会被复制到输出目录：

  "assets": [
    "src/favicon.ico",
    "src/assets"
  ]
  

修正后的完整代码示例 #

<div style="text-align:center;" class="backgroundimage">
    
</div>

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .backgroundimage {
        background-image: url('assets/logo.png');
        background-size: cover;
        background-repeat: no-repeat;
        width: 200px;
        height: 100vh;
    }
</style>

内容的提问来源于stack exchange，提问作者Amateur coder