如何在css使用绝对路径的图片做背景

在做一个项目,里面有很多图片要展示,处于后期维护方便的考虑,准备做成把图片上传后,使用绝对路径来引用的方式来展示,这样如果后面图片有更新,或者增加之类的,都不需要改动项目,只要去图片维护的地方去操作就好了。
但是!现在我本地测试的时候,在css里面写
background: url(D:\dev\uploadfile\测试图1.png) no-repeat;
结果报错:Not allowed to load local resource: file:///D:/dev/uploadfile/%E5%82%A8%E5%80%BC%E5%8D%A1%E6%8D%A2%E5%8D%A1%E6%B5%81%E7%A8%8B.png
大概是说绝对路径不能用。但是我觉得应该是可以用的才对,还有为什么它给我的路径前面加上了file:///,是不是这个导致的我的图片访问不了?
补充下,应该不是正反斜杠的问题,因为我都换过试过了。
另外,我就要用绝对路径,因为用相对路径要把图片都放到项目里面,这个后期维护会很麻烦,所以如果想告诉我用相对路径的朋友,你能有解决后期维护的方案的话,也可以提出来

阅读 13.3k
5 个回答

Not allowed to load local resource

出于安全性考虑,是不允许通过这种方式访问本地的文件的。

可以在本地图片文件夹下起一个http服务,具体用nginx还是python还是nodejs还是其他的就看个人喜好了。

每次或者定期通过接口去服务后台取最新的图片url,然后动态配置到background里。
这里就需要图片服务后台有http服务提供给前台页面

你需要的可能是一个单独指向图片存放目录的服务。用本地路径的思路是不可行的,幸好浏览器就禁止了这种行为。因为如果允许访问文件路径,在客户端访问网页时,根据文件路径读取的也是客户端的本地文件,而不是服务器上的。去大概了解下ngnix怎么用吧,可以很方便的帮你搭建一个图片服务,然后把页面中的图片路径换成nginx服务路径。

可以设想下,这样写路径,background: url(D:\dev\uploadfile\测试图1.png) no-repeat;就算浏览器允许了这种写法。在你的电脑访问是没有问题,但是在另一台电脑上呢?如要要正常访问,正常显示,就要别人先在创建好D:\dev\uploadfile\这个目录,再添加这张测试图1.png图片,这样的访问很糟糕的。就好像,你访问别人的网站时候,不需要这样操作吧!你可以使用图片外链的方式设置绝对路径,或者直接用你上线的图片地址也可以。附上一个图片外链的地址-贴图库

您好,web下的绝对路径和相对路径
相对路径:helloworld ./helloworld ../helloworld 这样的都是相对路径
绝对路径:/helloworld /myweb/helloworld 这样的都是相对路径
因此,不必非要带上根目录,只要是第二种绝对路径,就可以了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题