将图像从本地磁盘加载到html

Question

我必须从本地磁盘将图像上传到HTML页面上，由于安全原因和相同的原始策略，我现在知道这是不可能的。

1.）我的图片“ loadingimage.jpg”与我的.html页面位于同一位置。 我确实尝试过类似的相对路径

<style>
body {
background-image: url("/loadingimage.jpeg");
}
</style>

它给我像这样的错误

Failed to load resource: the server responded with a status of 404 (Not Found)  
http://10.2.9.208:8081/loadingimage.jpg

当我直接打开文件时，只有在使用node js express从磁盘提供此html文件时，才不会出现此错误。 我的节点js中有这段代码

app.get('/abt', function (req, res) {
res.sendFile(path.join(__dirname, '../../startpage.html'));
});

请不要重复提问这个问题，因为我已经浏览了所有链接，但找不到解决方案。因此，我将其重新发布。 无需转换为base64代码就能完成此操作吗？ 我该怎么办？

2）但是，即使我设法以某种方式将其显示在浏览器中，我也希望所有浏览我网页的客户端都能看到它，就像假设一个WELCOME图像一样。 我如何使其成为可能？

我不允许在网络上使用任何图像托管服务器。 我可以做些什么，例如访问客户端PC并将图像存储在本地，使用它，然后在关闭页面时将其删除吗？

我有一台在后台运行的服务器，是否可以将这些图像存储在服务器上，然后将其检索并显示在客户端PC上？

编辑1：我尝试使用此

 <img class="logo" src="http://10.2.9.208:8081/loadingimage.jpg" alt="My_Logo">

现在，这不仅给我同样的错误，而且还显示了损坏的图像。

这个小提琴： https : //jsfiddle.net/SuchitraIyer/sno3j98w/

Answer 1

如果您的图片与页面/文件夹位于相同的位置，并且拼写正确的图片名称，请尝试以下代码：

body {
   background-image: url("3011483-euro2016-omb-pes2016_1.jpg");
}

您只需要从文件名的开头删除正斜杠...

我希望这能帮到您...

谢谢...

Answer 2

如果您的HTML FILE和IMAGE位于同一文件夹中，则

 background-image: url("YOUR-IMAGE-NAME");

除非您创建任何文件夹

-文件夹/您的图像

-HTML文件

代码就是这样。

 background-image: url("FOLDER/YOUR-IMAGE-NAME");

您可以将替代方法与以file:///开头的完整PATH一起使用。

file:///C:/imagename

我希望这个答案对您有帮助。

Answer 3

将您的图片放入文件夹，然后输入路径，如下图所示

body {
  background-image: url("images/loading.jpg");
}, 

由于您使用的是node.js，因此该线程可能会为您提供帮助

如何使用node.js中的express框架提供图像文件？

Answer 4

body {
  background-image: url("../../loadingimage.jpg");
}, 

Answer 5

仅当我将图像传输到与节点js文件相同的位置时，这对我才有效，尽管它应该有其他作用。