天天看點

HTML編輯器中使用img插入圖檔

首先,要說明一點,我現在使用的這個系統的網絡編輯器,不支援圖檔的插入功能。但是,我現在要實作這個功能,因為在我的文章中要出現大量的圖檔。

如果不能插入圖檔的話,那是一件很糾結的事情,而且也會影響到整篇文章的效果。

其次,對于html語言我是不懂的,也沒有時間去學習它了。

而我現在的目的就是要把伺服器上已經上傳的圖檔,插入到文章中。在網上差了很多的資料,說要使用img這個标簽。

兄弟們,你懂的啊。咱們沒有學過網頁程式設計之類的語言,說一咱們不懂。但是網上也有這方面的相關執行個體,咱就比葫蘆畫瓢了哦。

看截圖:

HTML編輯器中使用img插入圖檔

我在網上看了很多的解釋,就是使用如下的格式:

<p>月季花: <img src="/images/eda1.jpg" /></p>

這個寫的很簡單,但是讓我們這些門外漢,看不懂呢。其中還有的提到了html的相對路徑和絕對路徑。咱對這個是更不了解了,這個是屬于專業術語。

不過有一點,我們不得不提到,那就是加入網站不在此空間上了,那麼搬家後的網站文章中的圖檔必須能顯示的。看了網上的相關解釋,如果要達到這個要求的話,那要使用相對路徑。

好了,我們現在已經确定要使用的格式了,那麼還要确定圖檔的存儲檔案夾。我們現在假設圖檔存在image這個檔案夾下。如果要使用相對路徑的話,那麼上面的格式就要進行一些相應的修改了。

<p>月季花: <img src="../images/eda1.jpg" /></p>

可以看到,很明顯的不同就是多了兩個點點。呵呵,這個我們現在在編輯器中,來看看效果。

HTML編輯器中使用img插入圖檔
HTML編輯器中使用img插入圖檔

我們現在要把,上邊的代碼複制近來就可以了。

HTML編輯器中使用img插入圖檔

代碼複制近來之後,再次點選“源碼”進行切換,切換到普通視圖下。

HTML編輯器中使用img插入圖檔

我們現在可以在背景看到圖檔了。,然後我們再看看前台的效果如何??

HTML編輯器中使用img插入圖檔

我們可以看到文字已經顯現出來了,但是前台卻沒有顯示出來,這個很糾結的呢。我們主要是前台看圖檔呢。背景不顯示也是可以的,但是前台必須要顯示。

其實這個很簡單呢,還記得前邊我們修改的那個格式嗎?我們隻是多加了兩個點,現在我們少一個看看如何?

HTML編輯器中使用img插入圖檔

我們在此切換到普通視圖下,可以看到圖檔已經不顯示了

HTML編輯器中使用img插入圖檔

那我們在切換到前台:

HTML編輯器中使用img插入圖檔

可以看到現在前台已經顯示圖檔了,呵呵,我們的目的也已經達到了。

ps:很多的高手已經不屑于,我們這種門外漢了。不過,我們隻要達到自己的要求就行了。