iT邦幫忙

1

html 本機圖片無法顯示

html5
Jacky115 2021-10-24 14:06:07 ‧ 15954 瀏覽

  • 分享至 

  • xImage

我寫了一個index.html裡面有<img src="picture/login.png">
但瀏覽器一直無法顯示圖片
不知道是哪裡做錯了

index.html同級目錄中有picture資料夾裡面有login.png的圖片https://ithelp.ithome.com.tw/upload/images/20211024/20140763cP0WNxE0Wu.png

我直接用瀏覽器開index.html
src路徑會是file:///C:/xxx/xxx/picture/login.png
然後圖片可以顯示!!!
但用flask跑 再開瀏覽器進入localhost就會看不見
src路徑此時會是http://localhost/picture/login.png

看更多先前的討論...收起先前的討論...
窮嘶發發發 iT邦高手 1 級 ‧ 2021-10-25 10:03:08 檢舉
確認 圖檔的檔名有無大小寫，對於瀏覽器，login.png Login.PNG 是兩個檔案，
不是同一個，檔名跟給SRC的檔名大小寫要完全一樣
其實還有一個問題就是，樓主大概是自學 HTML 吧
可能連 WEB SERVICE 都沒有，基本上建議先去看一下這個部分
然後先從弄好WEB SERVICE之後再去看網頁要怎麼寫
基本上很多時候在沒有 WEB SERVICE 的時候你寫得怎麼樣都做不得準
因為最後是 WEB SERVICE 跑出來，如果有後台加料，那會有很多因為不熟悉後台套件的狀況，你出來的頁面就不是你要的
Hans5300609 iT邦研究生 4 級 ‧ 2021-10-26 02:54:26 檢舉
如果是資料夾或檔案有多一個空白鍵就搞笑惹w
Jacky115 iT邦新手 4 級 ‧ 2021-10-26 12:00:55 檢舉
圖片檔名沒有錯，而且我src路徑的檔名也是直接從圖片檔名複製過來的，所以應該是不會不一樣
我是用flask跑出來的
Mao iT邦研究生 5 級 ‧ 2021-11-12 22:55:19 檢舉
　　
登入發表討論
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

6 個回答

3
Mao
iT邦研究生 5 級 ‧ 2021-10-24 14:23:56
最佳解答

路徑問題
HTML 引入本地圖片需使用相對路徑 <img src="./picture/login.png">
其中 ./ 代表當前同一層目錄下
cat
不清楚你是透過 webpack 打包部署，還是其他套件 bulid 出來的

但原生 HTML 正常來講是會顯示

看更多先前的回應...收起先前的回應...
Jacky115 iT邦新手 4 級 ‧ 2021-10-24 15:09:08 檢舉

加上./我也有試過了，但不知道為什麼還是跑不出來

Mao iT邦研究生 5 級 ‧ 2021-10-24 18:27:29 檢舉

是純手打 HTML 還是透過套件部署的

Jacky115 iT邦新手 4 級 ‧ 2021-10-25 00:09:14 檢舉

不太懂套件部署的意思?? 但html是我自己打得沒錯

Mao iT邦研究生 5 級 ‧ 2021-10-25 14:41:38 檢舉

你有完整一點的架構嗎？像這樣

|- ../
    |- picture/
        |- login.png
        |- xxx.PNG
        |- abc.jpg
    |- 404.html
    |- 500.html
    |- base.html
    |- index.html
    |- login.html
    |- register.html
    |- user.html
|- ...
Jacky115 iT邦新手 4 級 ‧ 2021-10-26 12:08:57 檢舉

https://ithelp.ithome.com.tw/upload/images/20211026/20140763Axmt8yNh0Y.png

Mao iT邦研究生 5 級 ‧ 2021-10-26 14:23:07 檢舉

原來你是使用 flask 跑的，那你可以嘗試把 picture 資料夾移動到 templates 資料夾外面，並把資料夾名稱改成 static。

/*  資料架構  */
|- static/
    |- login.png
    |- ...
|- templates/
    |- index.html
    |- ...
|- app.py

然後圖片路徑改成使用 <img src="./static/login.png"/> 試試看

Jacky115 iT邦新手 4 級 ‧ 2021-10-28 17:48:17 檢舉

對!!!放進static資料夾就可以看見圖片了
感謝你!!!

Mao iT邦研究生 5 級 ‧ 2021-10-28 23:57:30 檢舉

恭喜你達成目的，是不是該選個最佳答案呀～
/images/emoticon/emoticon34.gif

登入發表回應
1
allenlwh
iT邦高手 1 級 ‧ 2021-10-24 17:54:29

在預定出現圖片的地方，按一下右鍵，看看圖片的路徑是什麼。
可以搭配F12使用。

看更多先前的回應...收起先前的回應...
Jacky115 iT邦新手 4 級 ‧ 2021-10-25 00:27:30 檢舉

我將滑鼠移到路徑上面發現他是去http://localhost/picture/login.png找圖片耶
https://ithelp.ithome.com.tw/upload/images/20211025/20140763JXFgSviwW9.png

allenlwh iT邦高手 1 級 ‧ 2021-10-25 00:36:10 檢舉

換一個檔案試試。
抓一個我的文件\範例圖片\隨便一個jpg，放到picture資料夾裡。
看看這個jpg是否可以正常顯示在網頁上。
我覺得有可能是那個png檔案的問題。

Jacky115 iT邦新手 4 級 ‧ 2021-10-25 00:45:57 檢舉

我剛另外下載了dog.jpg的圖片放進picture資料夾
一樣使用<img src="picture/dog.jpg">也是無法顯示

allenlwh iT邦高手 1 級 ‧ 2021-10-25 09:09:38 檢舉 
img src="../picture/dog.jpg"
Jacky115 iT邦新手 4 級 ‧ 2021-10-25 09:26:16 檢舉

可以請問為什麼是要用..嗎??因為我的html檔跟picture資料夾是在同一級目錄中
我也有試著把picture移到上一級目錄中，然後src="../picutre/dog.jpg"，但還是無法顯示

allenlwh iT邦高手 1 級 ‧ 2021-10-25 10:57:41 檢舉

如果相對路徑還是不行，就只好用絕對路徑了。

img src="http://[yourSite]/picture/dog.jpg"
登入發表回應
0
純真的人
iT邦大師 1 級 ‧ 2021-10-24 22:17:18

我覺得唷~你應該要把圖片網址貼到瀏覽器~
看圖片是否真的會看的到@@~
搞不好picture資料夾是不存在的~

Jacky115 iT邦新手 4 級 ‧ 2021-10-25 00:31:26 檢舉

我不太懂是什麼意思
要怎麼把本機圖片貼到瀏覽器呢

allenlwh iT邦高手 1 級 ‧ 2021-10-25 00:33:07 檢舉

直接把圖片按住，拉到瀏覽器裡面，讓瀏覽器開啟

Jacky115 iT邦新手 4 級 ‧ 2021-10-25 00:39:18 檢舉

喔喔 懂了 但我拉上去是可以正常顯示圖片的

登入發表回應
0
shenra
iT邦新手 5 級 ‧ 2021-10-25 10:12:23

有試過使用不同瀏覽器嗎？ IE, Firefox, Edge, Chrome…

Jacky115 iT邦新手 4 級 ‧ 2021-10-25 11:40:33 檢舉

edge跟chrome都試過了

登入發表回應
0
阿甘
iT邦新手 5 級 ‧ 2021-10-25 15:03:25

我先假設你是直接點開你的Index.html檔案
先讓結構單純
Images底下一張照片(簽名.jpg)
Index.html(與Images同一層)

以下我的程式碼，是正常的
<img src="Images/簽名.jpg">

你的程式碼，試試看吧
<img src="picture/login.png">

Jacky115 iT邦新手 4 級 ‧ 2021-10-26 12:13:48 檢舉

我是用flask跑然後開瀏覽器的localhost
我就是打這個<img src="picture/login.png">
但跑不出圖片/images/emoticon/emoticon02.gif

阿甘 iT邦新手 5 級 ‧ 2021-10-26 18:51:35 檢舉

這個方式有試過嗎?
<img src="~/picture/login.png">

登入發表回應
0
海綿寶寶
iT邦大神 1 級 ‧ 2021-10-26 09:03:18

試試看
用瀏覽器的「開啟檔案」打開 index.html
使得網址列顯示的是類似 file://index.html
而不是 http://127.0.0.1:5000/index.html

Jacky115 iT邦新手 4 級 ‧ 2021-10-26 12:26:20 檢舉

對!!! 我直接用瀏覽器開index.html
src路徑會是file:///C:/xxx/xxx/picture/login.png
然後圖片可以顯示!!!
但用flask跑 再開瀏覽器進入localhost就會看不見

海綿寶寶 iT邦大神 1 級 ‧ 2021-10-26 12:34:09 檢舉

原因是「路徑」的問題
picture 是「檔案總管」的路徑(d:\picture)
在 Web Server 裡要另外定義「網站」的路徑(http://../picture/)
通常這兩者是「對應」的關係，不一定會「完全相同」

如果你是用 IIS 的話
可以參考這篇
看看如何定義 Virtual Directory

登入發表回應

我要發表回答

立即登入回答
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22200 篇
完賽人數
602 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙