核心要点
在 DedeCMS 中,文章的图片地址主要存储在两个地方,具体取决于你如何添加图片:

- 正文 (
body字段):这是最主要的位置,当你使用编辑器(如ckeditor、kindeditor)上传图片时,图片的路径会以 HTML 标签(如<img src="...">)的形式保存在文章的body字段里。 - (
description字段):如果你在“高级选项”中上传了“文章缩略图”,这个图片的地址会保存在description字段里,这个图通常用于列表页的封面图。
如何获取文章正文中的图片地址?
里的图片是混合在 HTML 代码中的,直接调用 body 字段会输出完整的 HTML,如果你只想提取出第一张图片的地址,或者所有图片的地址,需要使用 DedeCMS 的内置函数。
页 (article_article.htm) 调用
页,通常你不需要提取图片,直接输出 body 即可。
{dede:field.body/}
在文章列表页 (article_list.htm) 或首页等,提取文章的第一张图片作为封面
这是最常见的需求,DedeCMS 提供了非常方便的标签 {dede:field.body} 的一个功能,可以自动提取正文中的第一张图片。
方法:使用 imgsrc 属性

在列表循环中,使用 示例代码 (在 如果你想只获取图片地址,而不是 DedeCMS 默认的 方法:使用自定义函数(推荐) 在你的模板文件中使用这个函数: 文章缩略图存储在 代码示例: 注意: 这是 DedeCMS 用户最常遇到的问题,图片显示不出来,99% 的情况是路径问题。 如何确保图片是绝对路径? 后台设置: 编辑器设置: 使用自定义函数处理:
上面提到的 最佳实践建议:field.body 标签并指定 imgsrc='yes',它会自动解析并输出第一张图片的 <img>
article_list.htm 中):{dede:list pagesize='10'}
<li>
<!-- 这会自动提取正文第一张图片并输出 <img> 标签 -->
[field:body imgsrc='yes'/]
<h3><a href="[field:arcurl/]">[field:title/]</a></h3>
<p>[field:description function='cn_substr(@me,100)'/]...</p>
</li>
{/dede:list}
<img>imgsrc='yes' 输出的是完整的 <img> 标签,如果你只想得到 src 属性的值,可以使用自定义函数或更灵活的写法。
/include/helpers/extend.helper.php 文件。if ( ! function_exists('GetFirstImgUrl'))
{
function GetFirstImgUrl($body)
{
$preg = "/<img.*?src=[\'|\"](.*?)[\'|\"].*?[\/]?>/i";
preg_match_all($preg, $body, $match);
if (!empty($match[1][0])) {
// 处理相对路径,转为绝对路径
$url = $match[1][0];
if (strpos($url, 'http') !== 0) {
$url = 'http://' . $_SERVER['HTTP_HOST'] . $url;
}
return $url;
} else {
// 如果没有图片,可以返回一个默认图片
return '/images/default.jpg';
}
}
}
{dede:list pagesize='10'}
<li>
<!-- 调用自定义函数,只输出图片地址 -->
<img src="{dede:field.body function='GetFirstImgUrl(@me)'/}" alt="[field:title/]" />
<h3><a href="[field:arcurl/]">[field:title/]</a></h3>
<p>[field:description function='cn_substr(@me,100)'/]...</p>
</li>
{/dede:list}
如何获取文章缩略图地址?
description 字段中,调用非常简单。在列表页调用缩略图
{dede:list pagesize='10'}
<li>
<!-- 直接调用 description 字段作为图片地址 -->
<img src="[field:description/]" alt="[field:title/]" />
<h3><a href="[field:arcurl/]">[field:title/]</a></h3>
</li>
{/dede:list}
[field:description/] 会是空的,可能导致图片标签 <img src=""> 出现,为了防止这种情况,通常会配合 if 判断:{dede:list pagesize='10'}
<li>
{dede:if field.description != ''}
<img src="[field:description/]" alt="[field:title/]" />
{else /}
<img src="/images/default_thumb.jpg" alt="[field:title/]" />
{/dede:if}
<h3><a href="[field:arcurl/]">[field:title/]</a></h3>
</li>
{/dede:list}
图片路径问题:绝对路径 vs. 相对路径
/uploads/allimg/230101/123456.jpg,这种路径在浏览器地址栏直接打开页面时,可能会因为当前 URL 的层级不同而导致找不到图片。http://www.yourdomain.com/uploads/allimg/230101/123456.jpg 或 https://www.yourdomain.com/uploads/allimg/230101/123456.jpg,这种路径在任何情况下都能被正确找到。
/uploads)。
GetFirstImgUrl 函数就包含了将相对路径转为绝对路径的逻辑,这是一个很好的实践。
需求
存储位置
推荐调用方法
说明
文章正文内容
body 字段{dede:field.body/}直接输出完整的 HTML 内容。
文章第一张图片(带标签)
body 字段[field:body imgsrc='yes'/]在列表页中直接输出 <img>
文章第一张图片(仅地址)
body 字段{dede:field.body function='GetFirstImgUrl(@me)'/}通过自定义函数提取并转为绝对路径。
文章缩略图
description 字段[field:description/]直接调用,注意判断是否为空。
description),因为它是独立控制的,更可控。
