幫助:外部圖像

出自H萌娘
跳至導覽 跳至搜尋

本頁面是一個關於如何使用外部圖像的幫助,如果您需要插入內部圖片,請參見:Help:圖像

簡單語法[編輯原始碼]

簡單的使用外部圖片,可以直接將圖片地址輸入或粘貼指條目內(如下文)。

簡單顯示外部圖像[編輯原始碼]

直接在文中插入圖片地址,即可顯示圖片:

https://img.moegirl.org.cn/common/8/87/2010-DEC-13MoeGirlWikiLogo.png

效果如下:

https://img.moegirl.org.cn/common/8/87/2010-DEC-13MoeGirlWikiLogo.png

這樣使用的時候在圖片後不要帶有URL參數。

Help:魔術字/解析器函數#URL與標題的數據和解析

你也可以使用 {{filepath:内部图片文件名}}來把內部圖片以外部圖像的格式顯現,如{{filepath:2010-DEC-13MoeGirlWikiLogo.png}}

效果如下:

https://hmoegirl.com/images/e/ea/2010-DEC-13MoeGirlWikiLogo.webp

使用模板排版外部圖片[編輯原始碼]

參見:模板:圖片外鏈

帶連結的外部圖像[編輯原始碼]

[http://zh.moegirl.org.cn/ https://img.moegirl.org.cn/common/8/87/2010-DEC-13MoeGirlWikiLogo.png]
  • 注意:格式為 [連結地址(空格)圖片地址]

效果如下:

https://img.moegirl.org.cn/common/8/87/2010-DEC-13MoeGirlWikiLogo.png

帶注釋的外部圖像[編輯原始碼]

主條目:Template:外部圖片注釋

萌娘百科中有一個模板,可以讓編輯者方便地為外部圖片加上框架,並且能夠對齊浮動。

語法為:{{外部图片注释|图片地址|注释文字|位置(默认为右)|宽度=尺寸(默认为400px)}}

{{外部图片注释|https://img.moegirl.org.cn/common/8/87/2010-DEC-13MoeGirlWikiLogo.png|这是萌娘百科LOGO|左|宽度=150px}}

效果如下:


您也可以使用這個模板的增強版{{Outer image}},詳見模板:Outer image/doc

<img />語法[編輯原始碼]

<img />語法可能相對複雜,但使用這個語法可以改變外部圖片大小(簡單語法無法實現)等功能。

基礎格式[編輯原始碼]

<img src="http://vignette2.wikia.nocookie.net/half-life/images/b/bc/Black_Mesa_logo_documents.svg/revision/latest?cb=20100327173831&path-prefix=en" />

效果如下:

<img src="http://vignette2.wikia.nocookie.net/half-life/images/b/bc/Black_Mesa_logo_documents.svg/revision/latest?cb=20100327173831&path-prefix=en" />

這種寫法顯示出來和#簡單顯示外部圖片中的圖片無異。

圖片縮放[編輯原始碼]

實現圖片縮放有兩種方式:定義圖片寬度width屬性)或/和定義圖片高度height屬性)。

使用寬度屬性[編輯原始碼]

如果需要一個寬度為250px的圖片:

<img src="https://img.moegirl.org.cn/common/8/87/2010-DEC-13MoeGirlWikiLogo.png" style="width:250px;" />

效果如下:

<img src="https://img.moegirl.org.cn/common/8/87/2010-DEC-13MoeGirlWikiLogo.png" style="width:250px;" />

使用高度屬性[編輯原始碼]

如果需要一個高度為150px的圖片:

<img src="https://img.moegirl.org.cn/common/8/87/2010-DEC-13MoeGirlWikiLogo.png" style="height:150px;" />

效果如下:

<img src="https://img.moegirl.org.cn/common/8/87/2010-DEC-13MoeGirlWikiLogo.png" style="height:150px;" />

同時使用[編輯原始碼]

同時定義高度和寬度可以實現拉伸圖片的效果。

  • 註:寬度屬性和高度屬性沒有先後順序之差別,即「先寫寬度後寫高度」和「先寫高度後寫寬度」沒有差別。
<img src="https://img.moegirl.org.cn/common/8/87/2010-DEC-13MoeGirlWikiLogo.png" style="height:300px;width:500px;" />

效果如下:

<img src="https://img.moegirl.org.cn/common/8/87/2010-DEC-13MoeGirlWikiLogo.png" style="height:300px;width:500px;" />

  • 注意1:通常過大的圖片不應該放置在條目正文內,這會不方便讀者瀏覽。大多數圖片的寬度應大約位於100至400像素之間,所以在設定圖片大小時,數值不應超過這個範圍。
  • 注意2:強行放大圖片會使解像度下降,因為這我們要求圖片變成500像素寬,但圖片的實際大小並沒有500像素寬只有400像素,因此瀏覽器的排版顯示器便要將圖片強制擴大至500像素寬,其顯示效果便會較差了。所以切記永不依照這個方法來放大位圖圖片。

其它屬性[編輯原始碼]

<img />語法還有其它的屬性可以選用:

屬性 描述
src URL 必須使用。規定顯示圖像的URL。
height pixels
%
定義圖像的高度。
width pixels
%
設置圖像的寬度。
alt text 規定圖像的替代文本(當圖片無法顯示時,顯示文本內容)。
title text 鼠標滑過時顯示的文字提示。
longdesc URL 指向包含長的圖像描述文檔的URL。
ismap URL 將圖像定義為伺服器端圖像映射。
usemap URL 將圖像定義為客戶器端圖像映射。

參考資料與注釋[編輯原始碼]