經(jīng)常聽(tīng)到網(wǎng)友苦述自己的網(wǎng)頁(yè)中有許多圖片不能正常顯示，究竟為什么不能正常顯示呢？總結(jié)其原因絕大部分都是因?yàn)槭褂昧隋e(cuò)誤路徑所致。網(wǎng)頁(yè)中的圖像、動(dòng)畫(huà)等素材都有自己固定的存放位置，網(wǎng)頁(yè)只是通過(guò)路徑使用HTML語(yǔ)言來(lái)調(diào)用它們，然后把它們顯示在網(wǎng)頁(yè)中。在網(wǎng)頁(yè)中的路徑大體可分為相對(duì)路徑和絕對(duì)路徑，大家(尤其是初學(xué)網(wǎng)頁(yè)設(shè)計(jì)的朋友)往往對(duì)它們不夠認(rèn)識(shí)，在應(yīng)該使用相對(duì)路徑的地方使用了絕對(duì)路徑，從而導(dǎo)致瀏覽器無(wú)法在指定的位置打開(kāi)指定的文件，使素材不能正常顯示。

那什么是相對(duì)路徑？什么是絕對(duì)路徑呢？為什么使用了絕對(duì)路徑有時(shí)就不能顯示呢？讓我們一起來(lái)認(rèn)識(shí)一下它們吧。

比如C盤(pán)的My Pictures目錄下有一個(gè)tp.jpg圖像，那么它的路徑就是c:\My pictures\tp.jpg，其實(shí)這種完整地描述文件位置的路徑就是絕對(duì)路徑。如網(wǎng)頁(yè)index.htm中有一張圖片tp.jpg，它們的絕對(duì)路徑是：

c:\My pictures\index.htm

c:\My pictures\tp.jpg

如果你使用了絕對(duì)路徑c:\My pictures\tp.jpg進(jìn)行圖片鏈接，那么在本地電腦中將一切正常，因?yàn)樵赾:\My pictures下的確存在tp.jpg這個(gè)圖片。但你將它們上傳到網(wǎng)站服務(wù)器上后，就不會(huì)正常了，因?yàn)榉?wù)器給你劃分的存放空間可能在C盤(pán)其他目錄中，也可能在D盤(pán)其他目錄中，總之不會(huì)那么巧的就是c:\My pictures。那么圖片路徑應(yīng)該如何設(shè)置呢？這里就必須使用相對(duì)路徑了，所謂相對(duì)路徑，顧名思義就是自己相對(duì)與目標(biāo)位置。在上例中index.htm中連接的tp.jpg就可以使用My pictures\tp.jpg來(lái)定位文件，這樣不論將這些文件放到哪里，只要它們的相對(duì)關(guān)系沒(méi)有變，就不會(huì)出錯(cuò)。具體的鏈接方式是這樣的：“..\My pictures\img.jpg”，其中使用“..\”來(lái)表示上一級(jí)目錄，“..\..\”表示上上級(jí)的目錄，以此類(lèi)推。

我們一起來(lái)看看初學(xué)的朋友可能犯的幾個(gè)路徑錯(cuò)誤：

例1

c:\mywed\wed\index．htm

c:\mywed\img\tp．jpg

在此例中，index.htm網(wǎng)頁(yè)中有tp.jpg這個(gè)圖片，因?yàn)閮蓚€(gè)文件同在Mywed目錄下，所以初學(xué)者可能把圖片鏈接寫(xiě)為img\tp.jpg，那么這樣實(shí)際的鏈接就變?yōu)榱薈:\mywed\wed\img\tp.jpg，顯然這是不正確的。正確的路徑應(yīng)該是相對(duì)路徑..\img\tp.jpg。

例2

c:\mywed\wed\wed1\index．htm

c:\mywed\img\img1\tp．jpg

在此例中，index.htm網(wǎng)頁(yè)中有tp.jpg這個(gè)圖片,初學(xué)者可能錯(cuò)誤的把圖片鏈接寫(xiě)為..\img\img1\tp.jpg，那么這樣轉(zhuǎn)為絕對(duì)路徑就是C:\mywed\wed\img\img1\tp.jpg了，因?yàn)樵谠撃夸浵虏](méi)有此文件，所以顯然這種鏈接是錯(cuò)誤的。正確的應(yīng)該是..\..\img\img1\tp.jpg。

例3

c:\mywed\wed\wed\index．htm

c:\mywed\wed\img\tp．jpg

在此例中，index.htm網(wǎng)頁(yè)中有tp.jpg這個(gè)圖片，初學(xué)者可能錯(cuò)誤地把圖片鏈接寫(xiě)為..\..\img\tp.jpg，那么這樣轉(zhuǎn)為絕對(duì)路徑就是C:\mywed\img\tp.jpg了，因?yàn)樵谠撃夸浵虏](méi)有此文件，所以顯然這種鏈接是錯(cuò)誤的。正確的應(yīng)該是..\img\tp.jpg。

通過(guò)上面三個(gè)例子，我們可以看到網(wǎng)頁(yè)與圖片所在目錄相同的部分都可以使用“..”進(jìn)行代替。

有的讀者可能會(huì)有這樣的疑惑：一個(gè)網(wǎng)站有許多的鏈接，我怎么能保證它們的連接都正確，如果我調(diào)整了一下圖片或網(wǎng)頁(yè)的存儲(chǔ)路徑，那不是全亂了么？為了提高工作效率，我們推薦大家使用Dreamweaver進(jìn)行網(wǎng)站編輯，因?yàn)樗袀€(gè)站點(diǎn)管理功能，使用該功能絕對(duì)路徑可以自動(dòng)地轉(zhuǎn)化為相對(duì)路徑，并且當(dāng)你在站點(diǎn)中改動(dòng)文件路徑時(shí)，與這些文件關(guān)聯(lián)的連接路徑都會(huì)自動(dòng)更改，實(shí)在是方便極了！

本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

當(dāng)前標(biāo)題：網(wǎng)站中網(wǎng)頁(yè)、圖片路徑問(wèn)題
標(biāo)題URL：http://jinyejixie.com/news35/320035.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁(yè)設(shè)計(jì)公司、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、外貿(mào)建站、關(guān)鍵詞優(yōu)化、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)