網頁程式設計-HTML-如何放置圖片到網頁上 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0

網頁程式設計-HTML-如何放置圖片到網頁上

網頁程式設計-html-插入圖片至網頁上

憤怒鳥 2021-01-26 20:09:21 ‧ 4966 瀏覽

分享至

1.問題:如何放置圖片到網頁上?

2.我要顯示的圖片(藍色框起的部份)

3.實作過程

3-1(圖片存檔位置)

3-2程式碼

<!DOCTYPE html>
    <head>
        <meta  charset="utf-8">
         <title>佛教慈濟大學</title>
    </head>


    <body>
    <img src="picture/TCU.jpg" alt = "TCU">

    </body>


</html>

3-3呈現畫面

4.請問可以告訴我如何將圖片插入至網頁?謝謝.

看更多先前的討論...收起先前的討論...

憤怒鳥 iT邦新手 5 級 ‧ 2021-01-26 20:18:31 檢舉

不好意思,我的程式碼和呈現畫面有改喔~

憤怒鳥 iT邦新手 5 級 ‧ 2021-01-26 20:27:50 檢舉

剛剛程式碼又有錯誤,所以scr改成src,但呈現畫面還是一樣

ccutmis iT邦高手 2 級 ‧ 2021-01-26 22:03:26 檢舉

網頁插入圖片的語法沒問題
有問題的是你需要一個網頁空間放網頁跟圖片
這樣別人才能透過google瀏覽器看到你的網頁跟圖片(假如他知道網址的話)
上面這樣解釋不知你看不看的懂，總之需要的東西是:
1. 一個網頁空間
2. 把網頁跟圖檔上傳到這個網頁空間
3. 開網頁瀏覽器輸入正確的網址測試能不能看到東西...

底下是一個用github網站提供的gitpage當作個人網頁空間的教學
( 這個網頁用的就是 gitpage )
可以試看看成功的話你就有個人網站了

https://ccutmis.github.io/study-coding/git-index.htm

相關資訊也可以到google搜' gitpage 個人網站教學'

窮嘶發發發 iT邦高手 1 級 ‧ 2021-01-27 10:34:20 檢舉

<img src="../picture/TCU.jpg" alt = "TCU"> 改這樣試試，HTML路徑有相對路徑與絕對路徑，我們假設沒有權限問題，那麼相對路徑應該可以這麼用

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2021-01-27 11:50:05 檢舉

其實~~~不知道有沒有人注意到。
他圖片的實際位置在哪?

登入發表討論

直播研討會

{{ item.subject }}

{{ item.channelVendor }} {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

4 個回答

1

雲端小姐

iT邦新手 5 級 ‧ 2021-01-29 16:28:20

最佳解答

你的步驟有兩個問題, 會造成這種錯誤

下載的方式, 請進到原始網頁才可以正確下載正確的圖片格式
以下是依照你說明的步驟下載圖片, 看一下這個不是jpg 格式喔!! 所以有可能造成錯誤的產生

正確的下載途徑如下, 可以試試看!!
檢查路徑
再不行, 請檢查你的路徑

回應
分享
檢舉

登入發表回應

3

㊣浩瀚星空㊣

iT邦大神 1 級 ‧ 2021-01-26 20:24:42

原則上，你目前的寫法就可以了。

至於為何圖片沒出現。就是你路徑上的問題
想先了解一件事。

你是否有安裝任何或是使用web server??
如果沒有的話，這樣的語法是無法正常讀取檔案的。

在無任何web server幫你處理html的情況下。
你只能用file:// 這個方式來讀取你本機目錄的圖片。

但請記得一件事。使用file的方式，並無法正確的發布網頁。

回應 4
分享
檢舉

看更多先前的回應...收起先前的回應...

憤怒鳥 iT邦新手 5 級 ‧ 2021-01-26 20:31:59 檢舉

請問web server的功能是不是和Live server的功能類似,可以讀取檔案?

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2021-01-27 08:32:55 檢舉

我是不懂你說的 Live server 是啥鬼東西。

原則上如果是有web server的網頁。
其在瀏覽器運行就得是http開頭的東西才對。
而不是像你圖片是用file開頭的東西。

簡單來說，你至少還是需要有些架server的能力

listennn08 iT邦高手 5 級 ‧ 2021-01-27 09:39:22 檢舉

Live Server 是 VSCode 的 extension
但 Live Server 打開會是 http://localhost:5050 不會是檔案路徑

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2021-01-27 11:48:42 檢舉

listennn08
你破我的梗了。

其實我是想讓他來告訴我 Live Server 是啥。
要不然他現在的情況，搞不好知道有這東西。
但根本不懂這東西。
也不懂web機制的東西。

或許他可能以為有使用了 Live Server 。就可以直接點擊打開html檔跑了也不一定。

所以...嘿嘿嘿~~~

登入發表回應

1

hokou

iT邦好手 1 級 ‧ 2021-01-27 08:22:42

應該是路徑有問題
你存的照片跟 HTML 檔案位置不同
照片是 C:\Users\xxx\Pictures
HTML 是 C:\Users\xxx\Desktop\VS Code
最簡單先把照片放在跟你的 HTML 的檔案資料夾位置一樣

<img src="TCU.jpg" alt = "TCU">

不過這是只在本機呈現的作法

回應 2
分享
檢舉

憤怒鳥 iT邦新手 5 級 ‧ 2021-01-30 22:15:27 檢舉

請問xxx可以是中文嗎?

hokou iT邦好手 1 級 ‧ 2021-01-30 23:28:16 檢舉

可以試試看，看瀏覽器有沒有支援
但一般都會避免

剛查網路上的就是要再設定解碼的部分
不然就會出現亂碼造成的路徑錯誤

登入發表回應

0

camabula

iT邦新手 2 級 ‧ 2021-01-29 10:34:16

你是用Windows 10，那就先把它的IIS(Internet Information Services)啟用吧！

在對應的資料夾(wwwroot)建立相關資料夾(picture)及檔案(index.html、TCU.jpg)。

準備妥當後打開瀏覽器，網址列輸入localhost，就可以看到結果了。

你也可以用命令提字元下指令(ipconfig)查詢IIS主機的IP，然後再用同區域網路內的其他電腦、手機、平板等連上這個伺服器。

電腦用IP連上的畫面

手機用IP連上的畫面

平板用IP連上的畫面

至於真實IP、申請網域名稱或動態網域名稱等那應該是很後面的課題了。

回應
分享
檢舉

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22195 篇

完賽人數

600 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙