Help:外部图像：修订间差异

H萌娘，万物皆可H的百科全书！
跳到导航 跳到搜索
imported>A635683851
（创建页面，内容为“本页面是一个'''关于如何使用外部图像'''的帮助，如果您需要插入内部图片，请参见：'''Help:图像''' == 简单语法 == 简单的...”）
 
imported>850710247liu
（// Edit via Wikiplus）
第7行： 第7行：
 直接在文中插入图片地址，即可显示图片：
 直接在文中插入图片地址，即可显示图片：


  '''<nowiki>https://img.acg.moe/common/8/87/2010-DEC-13MoeGirlWikiLogo.png</nowiki>'''
  '''<nowiki>https://img.moegirl.org/common/8/87/2010-DEC-13MoeGirlWikiLogo.png</nowiki>'''


 效果如下：
 效果如下：


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


這樣使用的時候在圖片後不要帶有URL參數。<!--如:https://img.moegirl.org/common/8/87/2010-DEC-13MoeGirlWikiLogo.png?miaomiaomiao 喵喵喵-->
;[[Help:魔术字/解析器函数#URL与标题的数据和解析]]
你也可以使用 '''<code><nowiki>{{filepath:内部图片文件名}}</nowiki></code>'''来把内部图片以外部图像的格式显现，如<code><nowiki>{{filepath:2010-DEC-13MoeGirlWikiLogo.png}}</nowiki></code>
效果如下：
{{filepath:2010-DEC-13MoeGirlWikiLogo.png}}
==== 使用模板排版外部图片 ====
==== 使用模板排版外部图片 ====
:参见 ：[[模板:图片外链]]
:{{ 参见|[[模板:图片外链]]}}


=== 带链接的外部图像 ===
=== 带链接的外部图像 ===
  '''<nowiki>[http://zh.moegirl.org/ https://img.acg.moe/common/8/87/2010-DEC-13MoeGirlWikiLogo.png]</nowiki>'''
  '''<nowiki>[http://zh.moegirl.org/ https://img.moegirl.org/common/8/87/2010-DEC-13MoeGirlWikiLogo.png]</nowiki>'''


* 注意：格式为 <nowiki>[</nowiki>'''链接地址'''(空格)''图片地址''<nowiki>]</nowiki>
* 注意：格式为 <nowiki>[</nowiki>'''链接地址'''(空格)''图片地址''<nowiki>]</nowiki>
第23行： 第31行：
 效果如下：
 效果如下：


[http://wiki.moegirl.org/ https://img.acg.moe/common/8/87/2010-DEC-13MoeGirlWikiLogo.png]
[http://wiki.moegirl.org/ https://img.moegirl.org/common/8/87/2010-DEC-13MoeGirlWikiLogo.png]


=== 带注释的外部图像 ===
=== 带注释的外部图像 ===
:主条目：[[Template:外部图片注释]]
{{Main|Template:外部图片注释}}
 萌娘百科中有一个[[Template:外部图片注释|模板]]，可以让编辑者方便地为外部图片加上[[Help:图像#使用框架，添加标题|框架]]。
 萌娘百科中有一个[[Template:外部图片注释|模板]]，可以让编辑者方便地为外部图片加上[[Help:图像#使用框架，添加标题|框架]] ，并且能够对齐浮动 。


 语法为：'''<nowiki>{{外部图片注释|图片地址|注释文字|位置（默认为右）|宽度=尺寸（默认为400px）}}</nowiki>'''
 语法为：'''<nowiki>{{外部图片注释|图片地址|注释文字|位置（默认为右）|宽度=尺寸（默认为400px）}}</nowiki>'''


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


 效果如下：
 效果如下：


{{外部图片注释|https://img.acg.moe/common/8/87/2010-DEC-13MoeGirlWikiLogo.png|这是萌娘百科LOGO|左|宽度=150px}}
{{外部图片注释|https://img.moegirl.org/common/8/87/2010-DEC-13MoeGirlWikiLogo.png|这是萌娘百科LOGO|左|宽度=150px}}
----
----
 您也可以使用这个模板的增强版{{tl|Outer image}}，详见[[模板:Outer image/doc]]。
 您也可以使用这个模板的增强版{{tl|Outer image}}，详见[[模板:Outer image/doc]]。


== <nowiki><img></nowiki>语法 ==
== <nowiki><img /></nowiki>语法 ==
'''<nowiki><img></nowiki>语法'''可能相对复杂，但使用这个语法可以改变外部图片大小（[[#简单语法|简单语法]]无法实现）等功能。
'''<nowiki><img /></nowiki>语法'''可能相对复杂，但使用这个语法可以改变外部图片大小（[[#简单语法|简单语法]]无法实现）等功能。


=== 基础格式 ===
=== 基础格式 ===
  '''<nowiki><img src="https://img.acg.moe/common/8/87/2010-DEC-13MoeGirlWikiLogo.png" /></nowiki>'''
  '''<nowiki><img src="http://vignette2.wikia.nocookie.net/half-life/images/b/bc/Black_Mesa_logo_documents.svg/revision/latest?cb=20100327173831&path-prefix=en" /></nowiki>'''


 效果如下：
 效果如下：


<img src="https://img.acg.moe/common/8/87/2010-DEC-13MoeGirlWikiLogo.png" />
<img src="http://vignette2.wikia.nocookie.net/half-life/images/b/bc/Black_Mesa_logo_documents.svg/revision/latest?cb=20100327173831&path-prefix=en" />


 这种写法显示出来和[[#简单显示外部图片]]中的图片无异。
 这种写法显示出来和[[#简单显示外部图片]]中的图片无异。
第57行： 第65行：
 如果需要一个宽度为250px的图片：
 如果需要一个宽度为250px的图片：


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


 效果如下：
 效果如下：


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


==== 使用'''高度'''属性 ====
==== 使用'''高度'''属性 ====
 如果需要一个高度为150px的图片：
 如果需要一个高度为150px的图片：


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


 效果如下：
 效果如下：


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


==== 同时使用 ====
==== 同时使用 ====
第76行： 第84行：
* 注：宽度属性和高度属性没有先后顺序之差别，即“先写宽度后写高度”和“先写高度后写宽度”没有差别。
* 注：宽度属性和高度属性没有先后顺序之差别，即“先写宽度后写高度”和“先写高度后写宽度”没有差别。


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


 效果如下：
 效果如下：


<img src="https://img.acg.moe/common/8/87/2010-DEC-13MoeGirlWikiLogo.png" style="height:300px;width:500px;" />
<img src="https://img.moegirl.org/common/8/87/2010-DEC-13MoeGirlWikiLogo.png" style="height:300px;width:500px;" />
 
* 注意：通常过大的图片不应该放置在条目正文内，这会不方便读者浏览。大多数图片的'''宽度'''应大约位于100至400像素之间，所以在设定图片大小时，数值不应超过这个范围。


*  另外请 注 意 ，强行放大图片会使分辨率下降， 这 因为我们要求图片变成500像素宽，但图片的实际大小并没有500像素宽，因此浏览器的排版显示器便要将图片强制扩大至500像素宽，其显示效果便会较差了。所以'''切记永不'''依照这个方法来放大图片。
* 注 意1：通常过大的图片不应该放置在条目正文内，这会不方便读者浏览。大多数图片的'''宽度'''应大约位于100至400像素之间 ， 所以在设定图片大小时，数值不应超过这个范围。
* 注意2： 强行放大图片会使分辨率下降，因为 这 我们要求图片变成500像素宽，但图片的实际大小并没有500像素宽 只有400像素 ，因此浏览器的排版显示器便要将图片强制扩大至500像素宽，其显示效果便会较差了。所以'''切记永不'''依照这个方法来放大 位图 图片。


=== 其它属性 ===
=== 其它属性 ===
'''<nowiki><img></nowiki>语法'''还有其它的属性可以选用：
'''<nowiki><img /></nowiki>语法'''还有其它的属性可以选用：


{| class="wikitable sortable"
{| class="wikitable sortable"
第109行： 第116行：
| usemap || ''URL'' || 将图像定义为客户器端图像映射。
| usemap || ''URL'' || 将图像定义为客户器端图像映射。
|}
|}
* 各属性详细资料请参见[[#参考资料|参考资料]]。
* 各属性详细资料请{{ 参见|[[#参考资料|参考资料]]}} 。


== 参考资料与注释 ==
== 参考资料与注释 ==
* http://www.w3school.com.cn/tags/tag_img.asp <nowiki> 《HTML <img> 标签 》</nowiki>
* [http://www.w3school.com.cn/tags/tag_img.asp <nowiki>HTML <img> 标签</nowiki>]
* 更多图像模板参见[[:分类:圖像維護模板]]
* 更多图像模板{{ 参见|[[:分类:圖像維護模板]]}}


{{DEFAULTSORT:Waibutuxiang}}
[[Category:帮助]]
[[Category:帮助]]

2020年2月26日 (三) 10:47的版本

本页面是一个关于如何使用外部图像的帮助，如果您需要插入内部图片，请参见：Help:图像

简单语法

简单的使用外部图片，可以直接将图片地址输入或粘贴指条目内（如下文）。

简单显示外部图像

直接在文中插入图片地址，即可显示图片： 

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

效果如下：

https://img.moegirl.org/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/ https://img.moegirl.org/common/8/87/2010-DEC-13MoeGirlWikiLogo.png]
  • 注意：格式为 [链接地址(空格)图片地址]

效果如下：

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

带注释的外部图像

主条目：Template:外部图片注释

萌娘百科中有一个模板，可以让编辑者方便地为外部图片加上框架，并且能够对齐浮动。

语法为：{{外部图片注释|图片地址|注释文字|位置（默认为右）|宽度=尺寸（默认为400px）}} 

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

效果如下：

<img alt="https://img.moegirl.org/common/8/87/2010-DEC-13MoeGirlWikiLogo.png" src="https://img.moegirl.org/common/8/87/2010-DEC-13MoeGirlWikiLogo.png" class="thumbimage" width="150px" style="" />
‌
查看原始图片
这是萌娘百科LOGO

您也可以使用这个模板的增强版{{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/common/8/87/2010-DEC-13MoeGirlWikiLogo.png" style="width:250px;" />

效果如下：

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

使用高度属性

如果需要一个高度为150px的图片： 

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

效果如下：

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

同时使用

同时定义高度和宽度可以实现拉伸图片的效果。

  • 注：宽度属性和高度属性没有先后顺序之差别，即“先写宽度后写高度”和“先写高度后写宽度”没有差别。
<img src="https://img.moegirl.org/common/8/87/2010-DEC-13MoeGirlWikiLogo.png" style="height:300px;width:500px;" />

效果如下：

<img src="https://img.moegirl.org/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 将图像定义为客户器端图像映射。

参考资料与注释

取自“https://hmoegirl.com/index.php?title=Help:外部图像&oldid=55277”