dede文章图片地址如何正确获取与修改?

99ANYc3cd6
预计阅读时长 17 分钟
位置: 首页 DEDE建站 正文

核心要点

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

dede文章图片地址
(图片来源网络,侵删)
  1. 正文 (body 字段):这是最主要的位置,当你使用编辑器(如ckeditor、kindeditor)上传图片时,图片的路径会以 HTML 标签(如 <img src="...">)的形式保存在文章的 body 字段里。
  2. (description 字段):如果你在“高级选项”中上传了“文章缩略图”,这个图片的地址会保存在 description 字段里,这个图通常用于列表页的封面图。

如何获取文章正文中的图片地址?

里的图片是混合在 HTML 代码中的,直接调用 body 字段会输出完整的 HTML,如果你只想提取出第一张图片的地址,或者所有图片的地址,需要使用 DedeCMS 的内置函数。

页 (article_article.htm) 调用

页,通常你不需要提取图片,直接输出 body 即可。

{dede:field.body/}

在文章列表页 (article_list.htm) 或首页等,提取文章的第一张图片作为封面

这是最常见的需求,DedeCMS 提供了非常方便的标签 {dede:field.body} 的一个功能,可以自动提取正文中的第一张图片。

方法:使用 imgsrc 属性

dede文章图片地址
(图片来源网络,侵删)

在列表循环中,使用 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>

DedeCMS 默认的 imgsrc='yes' 输出的是完整的 <img> 标签,如果你只想得到 src 属性的值,可以使用自定义函数或更灵活的写法。

方法:使用自定义函数(推荐)

dede文章图片地址
(图片来源网络,侵删)
  1. 打开 /include/helpers/extend.helper.php 文件。
  2. 在文件末尾添加以下函数:
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. 相对路径

这是 DedeCMS 用户最常遇到的问题,图片显示不出来,99% 的情况是路径问题。

  • 相对路径:如 /uploads/allimg/230101/123456.jpg,这种路径在浏览器地址栏直接打开页面时,可能会因为当前 URL 的层级不同而导致找不到图片。
  • 绝对路径:如 http://www.yourdomain.com/uploads/allimg/230101/123456.jpghttps://www.yourdomain.com/uploads/allimg/230101/123456.jpg,这种路径在任何情况下都能被正确找到。

如何确保图片是绝对路径?

  1. 后台设置

    • 登录 DedeCMS 后台。
    • 进入 “系统” -> “系统基本参数” -> “核心设置”
    • 找到 “附件目录”“附件访问目录” 这两项,确保它们是正确的(通常是 /uploads)。
    • 更重要的是,检查 “是否使用绝对网址” 这个选项,如果勾选了,那么所有生成的图片链接都会是绝对路径。推荐勾选此项
  2. 编辑器设置

    • 进入 “系统” -> “系统基本参数” -> “核心设置”
    • 找到 “上传图片目录”“上传Flash目录” 等,确保它们也是正确的。
    • 有些编辑器(如 KindEditor)有自己的设置,可以在 “系统” -> “软件频道设置” 或相关编辑器配置中找到“远程站点URL”并填写你的域名。
  3. 使用自定义函数处理: 上面提到的 GetFirstImgUrl 函数就包含了将相对路径转为绝对路径的逻辑,这是一个很好的实践。

需求 存储位置 推荐调用方法 说明
文章正文内容 body 字段 {dede:field.body/} 直接输出完整的 HTML 内容。
文章第一张图片(带标签) body 字段 [field:body imgsrc='yes'/] 在列表页中直接输出 <img>
文章第一张图片(仅地址) body 字段 {dede:field.body function='GetFirstImgUrl(@me)'/} 通过自定义函数提取并转为绝对路径。
文章缩略图 description 字段 [field:description/] 直接调用,注意判断是否为空。

最佳实践建议:

  1. 在后台系统设置中,勾选“是否使用绝对网址”,这是解决路径问题的根本方法。
  2. 在列表页调用文章封面图时,优先使用缩略图 (description),因为它是独立控制的,更可控。
  3. 如果需要从正文中提取图片,使用自定义函数,这样既能获取地址,又能保证路径正确,还能处理无图时显示默认图片的情况。
-- 展开阅读全文 --
头像
dede模板交易平台可靠吗?
« 上一篇 04-04
织梦文章tittle是什么?如何快速生成?
下一篇 » 04-04

相关文章

取消
微信二维码
支付宝二维码