SCC Wiki | PmWikiZhCn / 插入图片

要在页面中插入图片，直接输入图片地址即可。图片提示文本（当图片无法打开是替代的显示文本，填写此内容同时会对盲人阅读提供方便）前后用双引号（""）括起来。接在图片网址后面。你可以把鼠标放放到图片上停顿一下，应该可以看到一个图片提示。示例：

http://pmichaud.com/img/misc/pc.jpg"这是一张页面袖子夹的图片"|[- %newwin% [[Wikipedia:Paper_clips|曲别针]]们环环相扣在一起。 -]

曲别针们环环相扣在一起。

图片也可以使用上传的附件文件 (例如： Attach:image.jpeg) 或使用InterMap链接。默认下面后缀的图片地址会被自动识别为插入图片：

  gif jpg jpeg png

（更多关于上传和Notes 其它扩展内容详见页面底部扩展阅读。）

仅仅像这样（ http://pmichaud.com/img/misc/pc.jpg ）创建图片链接，像这样： [[http://pmichaud.com/img/misc/pc.jpg]] 或[[Attach:image.jpeg]]直接使用双方括号括起来。

要给图片加超链接，把链接中文字部分的内容替换成图片地址就可以了。示例：

[[http://pmwiki.org/ | http://pmichaud.com/img/misc/pc.jpg"PmWiki"]]

或[[http://example.com|Attach:Groupname./image.jpeg]].

图片文本标题

要给图片加一个文本标题，可以像下面这样，给图片后面添加一竖（|），在输入标题即可。示例：

http://pmichaud.com/img/misc/pc.jpg"Paper clips" | '''这是图片文本标题 1'''

这是图片文本标题 1

一般，图片在段落中会占据一行。使用%center%可以使图片居中。使用%right%可以使用图片居右。示例：

在这长长一段话中，你可以注意到，这张图片是居中的，使用center。这段英文仅仅是占位符，不用理会Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. %center%http://pmichaud.com/img/misc/pc.jpg"Paper clips"%%

在这有一个长长一段话中，你可以注意到，这张图片因为使用right，现在居右了。Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. %right% http://pmichaud.com/img/misc/gem.jpg%%

在这长长一段话中，你可以注意到，这张图片是居中的，使用center。这段英文仅仅是占位符，不用理会Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Paper clips

在这有一个长长一段话中，你可以注意到，这张图片因为使用right，现在居右了。Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

浮动环绕

要想让图片左右浮动，对产生文本环绕效果，请使用%lfloat%（左环绕）或%rfloat%（右环绕）的Wiki风格。示例：

%lfloat text-align=center margin-top=5px margin-right=25px margin-bottom=5px margin-left=25px% http://pmichaud.com/img/misc/gem.jpg | '''钻石钻石亮晶晶！'''
'''这张图片采用做浮动，文本将在右侧环绕显示。后面是一堆废话，无需理会。with margins set; the caption is centered; the text wraps on the right side of the image.'''

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.

钻石钻石亮晶晶！

这张图片采用做浮动，文本将在右侧环绕显示。后面是一堆废话，无需理会。with margins set; the caption is centered; the text wraps on the right side of the image.

使用[[<<]]可以停止环绕文本。被截断的文本将不再环绕图片。示例：

%lfloat% http://pmichaud.com/img/misc/gem.jpg
'''The image is left-aligned, and the text wraps on the right side of the image. The text after the ''[@[[<<]]@]'' markup continues below the image.'''
[[<<]]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

The image is left-aligned, and the text wraps on the right side of the image. The text after the [[<<]] markup continues below the image.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

使用%lframe%或%rframe% 不仅有文本环绕效果，同时会对图片和标题加上边框效果，像下面这样样：

%rframe% http://pmichaud.com/img/misc/gem.jpg | '''钻石钻石亮晶晶！'''
'''这张图片会居右显示，文本居左。'''

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

%cframe width=100px bgcolor=lightblue border='3px solid red' padding=20px% http://pmichaud.com/img/misc/gem.jpg

有些时候，你需要对图片宽度和背景边框宽度进行适当设置:-
%cframe width=50px bgcolor=lightblue border='3px solid red' padding=20px% http://pmichaud.com/img/misc/gem.jpg

钻石钻石亮晶晶！

这张图片会居右显示，文本居左。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

有些时候，你需要对图片宽度和背景边框宽度进行适当设置:-

使用%block rframe% 来设置关闭多个图片的图片文本标题及边框。

%block rframe width=300px%http://pmichaud.com/img/misc/gem.jpg\\
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\\\
http://pmichaud.com/img/misc/bubble.jpg\\
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.%%

Text subsequent to the defined block wraps to the left of the frame. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Text subsequent to the defined block wraps to the left of the frame. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

设置图片尺寸

要调整图片显示大小，请使用像这样%width=50px%或%height=50px%的标记，尺寸可以自定义。%thumb%这个标记是表示图片%width=100px%（类似于小型缩略图）。

%width=50px% http://pmichaud.com/img/misc/bubble.jpg \
%height=50px% http://pmichaud.com/img/misc/bubble.jpg \
%thumb% http://pmichaud.com/img/misc/bubble.jpg

注意: 这种设置仅仅调整显示大小，不会对实际图片大小、格式等产生任何影响。

如果你希望在图片链接中设置图片大小，请使用%%。示例：

%width=60%[[http://pmwiki.org/ | http://pmichaud.com/img/misc/pc.jpg"PmWiki"]]%% \
%height=60%[[http://pmwiki.org/ | http://pmichaud.com/img/misc/pc.jpg"PmWiki"]]%% \

设置一个在新窗口(%newwin%)打开的图片链接。示例：

%newwin%[[http://pmwiki.org/ | http://pmichaud.com/img/misc/pc.jpg"PmWiki"]]%%

图片缩略图（%thumb%）可以和浮动或链接共同使用。示例：

%lframe thumb% [[http://pmichaud.com/img/misc/bubble.jpg | http://pmichaud.com/img/misc/bubble.jpg"Burst the bubble"]] | [-Bubble-]
%lframe thumb% http://pmichaud.com/img/misc/pc.jpg"Clip the ticket" | [-Paper Clips-]
%lframe thumb% [[DocumentationIndex | http://pmichaud.com/img/misc/gem.jpg"Visit the Documentation Index"]] | [[DocumentationIndex | [-Rock On-]]]

Bubble

Paper Clips

Rock On

图片链接。

图片链接的link markup标记。示例：

[[PmWiki/Links | http://pmichaud.com/img/2003/atc-1.gif"Information about wiki links"]]

注意

像这样http://example.com/script/tux缺乏扩展名的图片，可以在后面增加扩展名参数进行显示。像这样： http://example.com/script/tux?format=.png)或这样：http://example.com/script/tux#file.png。
设置宽度百分百

%width=10pct% http://pmichaud.com/img/misc/bubble.jpg \
%height=30pct% http://pmichaud.com/img/misc/bubble.jpg

如果是一个长的图片文本标题，最好像下面那样加上边框

>>lframe width=130px<<
%thumb width=130% [[http://pmichaud.com/img/misc/bubble.jpg | http://pmichaud.com/img/misc/bubble.jpg"Burst the bubble"]] | [--Long caption for an image like [[http://pmichaud.com/img/misc/bubble.jpg | the bubble]]. This is just to show some text flowing within the frame.--]
>><<

Long caption for an image like the bubble. This is just to show some text flowing within the frame.

扩展阅读

Cookbook:Images - 添加图片、自动缩略图和背景图片。

致谢

本页面演示图片来自于flickr.com。

在Wiki中需要尽可能的使用相对图片地址，而非完整的图片地址？

是的，像图片附件，最好使用这样Attach:Groupname./image.gif的相对地址，好处是以后如管理员更换域名后，无需多余设置，依然可以正常显示图片。同网站的图片可以使用Path:/path/to/image.gif的方式设置。

我可以往Wiki里上传一个图片附件吗？

可以，详见：Uploads。

如何使用其它组的附件图片？

Include the page in the normal way, ie (:include GroupName.Pagename:). In the page to be included (that contains the image) change Attach:filename.ext to Attach:{$Group}./filename.ext.

如何禁止显示图片呢？

像config.php配置文件中增加下面一行：

DisableMarkup('img');
$ImgExtPattern = "$^";

如何让页面中的图片文本显示为<div>标签，而非<p>标签呢？

可以使用 [==]在每行开头。

[==] http://www.pmwiki.org/pub/pmwiki/pmwiki-32.gif

如何使用相对路径插入图片？

详见：Cookbook:RelativeLinks 和$EnableLinkPageRelative 。

如何增加更多的图片后缀，使其直接贴上链接就可显示为图片？

在“config.php”配置文件添加下面一行:
$ImgExtPattern = "\\.(?:gif|jpg|jpeg|png|bmp|GIF|JPG|JPEG|PNG|BMP)";

如何设置表格中图片的左右位置？

详见表格和图片：TableAndImage。