首頁(yè) 猿問(wèn) image src...

image src 屬性不顯示本地存儲(chǔ)的圖像

Html5

至尊寶的傳說(shuō) 2023-10-10 14:51:16

我將圖像作為 png 文件存儲(chǔ)在本地服務(wù)器上，并且僅將文件名保存到數(shù)據(jù)庫(kù)中。當(dāng)向客戶端渲染圖像時(shí)，我將圖像的相對(duì)路徑與數(shù)據(jù)庫(kù)中的文件名結(jié)合起來(lái)，如下所示：<img src='../../public/avatar-pictures/3fVZNShyQRAtBbipvzVrDwDD.png'/>但這不起作用。作為絕望中的最后一次嘗試，我什至將 png 文件本身移動(dòng)到客戶端腳本的根目錄，但它仍然沒有產(chǎn)生任何結(jié)果。是什么導(dǎo)致了這個(gè)問(wèn)題？

查看完整描述

1 回答

牧羊人nacy

TA貢獻(xiàn)1862條經(jīng)驗(yàn) 獲得超7個(gè)贊

默認(rèn)情況下，node.js 和 Express 不提供任何文件。因此，您不能為瀏覽器提供服務(wù)器硬盤上某個(gè)位置的路徑并期望 Web 服務(wù)器發(fā)送文件。它并沒有這樣做（與熟悉 Apache 的人可能期望的不同）。

您的服務(wù)器上需要有一條指向公共目錄的路由。有多種方法可以做到這一點(diǎn)，但這是一種：

<img src='/public/avatar-pictures/3fVZNShyQRAtBbipvzVrDwDD.png'/>

然后，在您的服務(wù)器上，您將使用express.static()中間件創(chuàng)建一個(gè)路由，該路由查找以以下開頭的 URL /public，并將提供硬盤驅(qū)動(dòng)器上與 URL 路徑匹配的公共目錄中的文件：

app.use("/public", express.static("../../public"));

您傳遞到的路徑express.static()需要指向本地硬盤上的公共目錄。您沒有透露您的本地文件結(jié)構(gòu)，因此我無(wú)法確切地告訴您它應(yīng)該是什么。上面的示例將相對(duì)于程序啟動(dòng)時(shí)的當(dāng)前工作目錄。從模塊目錄中自己構(gòu)建路徑可能更常見。因此，如果該public目錄比模塊目錄高兩級(jí)，您可以這樣做：

app.use("/public", express.static(path.join(__dirname, "../../public")));

然后，它會(huì)更具體地與模塊的目錄相關(guān)，而不依賴于當(dāng)前工作目錄，當(dāng)前工作目錄可以通過(guò)代碼或程序的啟動(dòng)方式進(jìn)行更改。

當(dāng)然，您也可以使用完全限定路徑：

app.use("/public", express.static(path.join("/someVol/users/me/myProject/public")));

請(qǐng)記住，express.static()中間件會(huì)打開您指向的整個(gè)目錄樹以供公共訪問(wèn)，因此您必須絕對(duì)確保其中只有公共內(nèi)容。默認(rèn)情況下，express.static()不允許..進(jìn)入路徑，因此請(qǐng)求無(wú)法離開您指定的目錄。

反對(duì) 回復(fù) 2023-10-10