將圖像從本地磁盤加載到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文件相同的位置時，這對我才有效，盡管它應該有其他作用。