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

H萌娘,万物皆可H的百科全书!
跳到导航 跳到搜索
imported>=海豚=
(文本替换 - 替换“zh.moegirl.org”为“zh.moegirl.org.cn”)
imported>=海豚=
(文本替换 - 替换“[[Category:”为“[[分类:”)
 
(未显示同一用户的3个中间版本)
第7行: 第7行:
 直接在文中插入图片地址,即可显示图片:
 直接在文中插入图片地址,即可显示图片:


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


 效果如下:
 效果如下:


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


 這樣使用的時候在圖片後不要帶有URL參數。<!--如:https://img.moegirl.org/common/8/87/2010-DEC-13MoeGirlWikiLogo.png?miaomiaomiao 喵喵喵-->
 這樣使用的時候在圖片後不要帶有URL參數。<!--如:https://img.moegirl.org.cn/common/8/87/2010-DEC-13MoeGirlWikiLogo.png?miaomiaomiao 喵喵喵-->


;[[Help:魔术字/解析器函数#URL与标题的数据和解析]]
;[[Help:魔术字/解析器函数#URL与标题的数据和解析]]
第25行: 第25行:


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


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


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


=== 带注释的外部图像 ===
=== 带注释的外部图像 ===
第39行: 第39行:
 语法为:'''<nowiki>{{外部图片注释|图片地址|注释文字|位置(默认为右)|宽度=尺寸(默认为400px)}}</nowiki>'''
 语法为:'''<nowiki>{{外部图片注释|图片地址|注释文字|位置(默认为右)|宽度=尺寸(默认为400px)}}</nowiki>'''


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


 效果如下:
 效果如下:


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


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


 效果如下:
 效果如下:


<img src="https://img.moegirl.org/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的图片:
 如果需要一个高度为150px的图片:


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


 效果如下:
 效果如下:


<img src="https://img.moegirl.org/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;" />


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


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


 效果如下:
 效果如下:


<img src="https://img.moegirl.org/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像素之间,所以在设定图片大小时,数值不应超过这个范围。
* 注意1:通常过大的图片不应该放置在条目正文内,这会不方便读者浏览。大多数图片的'''宽度'''应大约位于100至400像素之间,所以在设定图片大小时,数值不应超过这个范围。
第102行: 第102行:
| src || ''URL'' || {{color|red|必须使用。}}规定显示图像的URL。
| src || ''URL'' || {{color|red|必须使用。}}规定显示图像的URL。
|-
|-
| height || ''pixels<br />%'' || 定义图像的高度。
| height || ''pixels<br/>%'' || 定义图像的高度。
|-
|-
| width ||  ''pixels<br />%'' || 设置图像的宽度。
| width ||  ''pixels<br/>%'' || 设置图像的宽度。
|-
|-
| alt || ''text'' || 规定图像的替代文本(当图片无法显示时,显示文本内容)。
| alt || ''text'' || 规定图像的替代文本(当图片无法显示时,显示文本内容)。
第122行: 第122行:
* 更多图像模板{{参见|[[:分类:圖像維護模板]]}}
* 更多图像模板{{参见|[[:分类:圖像維護模板]]}}


[[Category:帮助]]
[[ 分类:帮助]]

2021年4月18日 (日) 21:10的最新版本

本页面是一个关于如何使用外部图像的帮助,如果您需要插入内部图片,请参见: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 将图像定义为客户器端图像映射。

参考资料与注释[编辑源代码]