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

My goal is to set the background image from a local image on my computer.

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

I have two lines of code, one that works and one that doesn't: (the local one does not work)

我有两行代码，一行可以用，另一行不能用:(本地代码不能用)

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

When I try running the second one (the local one), this is the error that I get:

当我尝试运行第二个(本地的)时，这是我得到的错误:

GET http://localhost:23433/~/Content/images/Image1.jpg 404 (Not Found)

获取http://localhost:23433/~/Content/images/Image1.jpg 404(未找到)

I can verify that the image path is correct, even if I put the image file in the same directory to make things simple. I know from documentation that the backgroundImage property in JS requires url(). Is there any reason why this wouldn't work?

我可以验证图像路径是否正确，即使我将图像文件放在同一个目录中以简化操作。我从文档中知道，JS中的backgroundImage属性需要url()。有什么理由说明这行不通吗?

3 个解决方案

#1

This is a tricky one... I can think of some problems this can have:

这是一个棘手的问题……我可以想到一些问题:

The server doesn't know what ~ refers to (are you running windows?)
服务器不知道~指的是什么(你在运行windows吗?)
The user running the server is not the same as the one you are logged in as. (~ stands for home directory, and when server evaluates it'll lead to user running the server home directory).
运行服务器的用户与登录的用户不同。(~代表主目录，当服务器计算时，将导致用户运行服务器主目录)。
The server is configured to ignore every request which is above it's www / html / localweb folder. (Altough in this case it would be weird to reply with a 404, a 403 would make more sense)
服务器被配置为忽略位于其www / html / localweb文件夹之上的每个请求。(在这种情况下，用404来回复会很奇怪，403会更有意义)

By the way, this is only possible if the server and the client are on the same machine. I don't know why you want it, but if you pretend to upload a website and have its background set to some field on the client machine, then simply forget about it.

顺便说一下，这只有在服务器和客户端在同一台机器上时才可能实现。我不知道你为什么想要它，但是如果你假装上传了一个网站，并且在客户端机器上设置了它的背景设置，那么就把它忘掉。

#2

The ~ abbreviation for your home directory is not recognized by the browser. However, expanding it will only help if the image is in a directory that is being served on local host. I don't know what you are using for a web server, but you'll need to find out what directory it is expecting to serve as its root

您的主目录的~缩写没有被浏览器识别。但是，只有当映像位于本地主机上服务的目录中时，扩展它才会有所帮助。我不知道您在web服务器上使用了什么，但是您需要找到它希望作为它的根的目录。

#3

You can't refer to an image from the users machine. The browser does not have access to the users file system, otherwise, any website you visit would be able to access your "Pictures" folder for example.

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

The image you use needs to be in your website directory or another public url. If you need to use a picture from the users machine, then you should do so with a file uploader.

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

#1