angular-图片地址处理


问题:在对应的less文件中添加图片,开发环境失效,生产环境更改图片位置后生效 background: url('/assets/images/logo.png')   尝试使用相对路径--开发环境和生产环境都成功了 background: url('../../../../../assets/images/custom/logo.png') 但是构建后的包会生成图片副本   解决:不要使用 ../dir 或 ../../dir 之类的路径,因为这样的相对路径很可能会在构建后在服务器中失败。 由于 assets/ 文件夹默认在 angular.json 文件中声明。我建议您仅对图像使用内联 css。例如:
<div class="bg-div" style="background-image: url(assets/images/imageX.png)">div>

这样在开发期间和部署期间都适用。您不必在构建期间再次更改路径。

理解 background: url();属性

在url(imagepath)里的这个imagepath,原来它是相对于.css文件这个目录,而不是调用css文件所在文件的这个目录

简单点说,就是假如我有个index.htm,它要调用index.htm所在的一个子目录style目录下的style.css文件,背景图片存放在与style目录同级的images目录下

于是乎,这里的CSS应该这样写:background:url(../images/bg.jpg);

总结

若样式表文件与内容分离:则background:url(../imgages/tick.png);

若样式表嵌在HTML文档中:background:url(images/tick.png);