通常在编码的过程中引入图片会使用 @ 作为别名来映射到 src 路径

例如在react

同样尝试在css中使用别名

会发现并没有成功映射到src目录，而是被当做真实目录去渲染了。

原因

因为 @ 并没有添加进 css-loader alias当中，所以不会被解析处理。

解决方案

使用 ~@ 作为别名映射到 src， 因为 ~@ 会被webpack进行处理。

例如：

css

body {
  background: url("~@/assets/img/screenshot.png");
}

html 在某些版本中使用 @ 会无效，可以尝试使用下面这种方式

<img src="~@/assets/img/screenshot.png">

最后

由于不同的webpack版本会有一些差异，或者是内置的loader被进行处理过，可以尝试使用以下几种方法:

body {
  background: url("~@/assets/img/screenshot.png");
  background: url("~assets/img/screenshot.png");
  background: url("@/assets/img/screenshot.png");
}