在javascript中设置背景图像时如何访问本地图像答案

【问题标题】：How to access local image when setting the background image in javascript在javascript中设置背景图像时如何访问本地图像
【发布时间】：2015-04-03 08:36:57
【问题描述】：

我的目标是从我的计算机上的本地图像设置背景图像。

我有两行代码，一行有效，另一行无效：（本地的不行）

                _html.style.backgroundImage = 'url("urlsourceblahblahblah")';
                _html.style.backgroundImage = 'url("/~/Content/images/Image1.jpg")';

当我尝试运行第二个（本地）时，这是我得到的错误：

GET http://localhost:23433/~/Content/images/Image1.jpg 404（未找到）

我可以验证图像路径是否正确，即使我将图像文件放在同一目录中以使事情变得简单。我从文档中知道 JS 中的 backgroundImage 属性需要 url()。这有什么不可行的原因吗？

【问题讨论】：

如果你在浏览器中输入localhost:23433/~/Content/images/Image1.jpg，你会得到什么？我认为 /~/ 是不正确的。
找不到资源。说明：HTTP 404。您要查找的资源（或其依赖项之一）可能已被删除、名称已更改或暂时不可用。请检查以下 URL 并确保其拼写正确。
如果你在localhost:23433，项目在哪个文件夹？
看起来您正在使用 asp.net。在这种情况下，您需要在将相对 url ~ 传递回客户端之前对其进行转换。
否则，使用~ 通常不会在 url 中使用，因此您需要找到图像的正确路径。

标签： javascript html css angularjs image

【解决方案1】：

这是一个棘手的问题...我能想到这可能会遇到的一些问题：

服务器不知道 ~ 指的是什么（你在运行 windows 吗？）
运行服务器的用户与您登录的用户不同。（~ 代表主目录，当服务器评估它会导致用户运行服务器主目录）。
服务器配置为忽略位于其 www / html / localweb 文件夹上方的每个请求。（虽然在这种情况下回复 404 会很奇怪，但 403 会更有意义）

顺便说一句，这只有在服务器和客户端在同一台机器上时才有可能。我不知道你为什么想要它，但如果你假装上传一个网站并将其背景设置为客户端计算机上的某个字段，那么就别管它了。

【讨论】：

【解决方案2】：

您不能引用来自用户计算机的图像。浏览器无权访问用户文件系统，否则，您访问的任何网站都可以访问您的“图片”文件夹。

您使用的图片需要在您的网站目录或其他公共网址中。如果您需要使用来自用户机器的图片，那么您应该使用文件上传器。

【讨论】：

【解决方案3】：

浏览器无法识别您的主目录的 ~ 缩写。但是，仅当图像位于本地主机上提供的目录中时，扩展它才会有所帮助。我不知道您在使用什么作为 Web 服务器，但您需要找出它期望作为其根目录的目录

【讨论】：