dede field.imgsrc 标签如何正确使用？

Of course! Let's break down {dede:field.imgsrc /} in detail. This is a fundamental and very common tag in the DedeCMS (织梦内容管理系统) template engine.

What is {dede:field.imgsrc /}?

In simple terms, {dede:field.imgsrc /} is a DedeCMS template tag used to display the URL of the first image found within the content of an article.

It's a shortcut that saves you from having to write more complex code to manually find and extract an image from the article's full text.

How it Works (The Core Logic)

When DedeCMS processes this tag on an article page, it performs the following actions:

1. Accesses the Article's Content: It looks at the full text of the current article, which is stored in the database field typically named body or arc.body.
2. Parses the HTML: It reads the HTML content of the article.
3. Finds the First Image: It searches the HTML for the first <img> tag.
4. Extracts the src Attribute: From that first <img> tag, it extracts the value of the src attribute.
5. Displays the URL: It prints that URL to the page.

Example: If your article's content (body) looks like this:

<p>这是一段文章的开头。</p>
<img src="/uploads/images/2025/10/cover_photo.jpg" alt="文章封面" width="800" height="400">
<p>这是文章的正文内容，可能还有其他图片...</p>
<img src="/uploads/images/2025/10/inside_pic.png" alt="内部图片">

Using {dede:field.imgsrc /} will output exactly:

/uploads/images/2025/10/cover_photo.jpg

Common Use Cases

This tag is extremely useful for list pages (arclist.htm) or other places where you want to show a thumbnail or representative image for an article without displaying the full content.

Scenario: Displaying an article list with a thumbnail.

In your list template (arclist.htm), you can use it like this:

{dede:arclist titlelen='30' row='10'}
  <li>
    <!-- 使用 field.imgsrc 来获取并显示缩略图 -->
    <a href="[field:arcurl/]">
      <img src="[field:imgsrc/]" alt="[field:title/]" />
    </a>
    <h2><a href="[field:arcurl/]">[field:title/]</a></h2>
    <p>[field:description function='cn_substr(@me,100)'/]...</p>
  </li>
{/dede:arclist}

This will generate a list of articles, each with a thumbnail pulled from the first image in its content.

Important Attributes and Customization

The tag is not static. You can use attributes to control its behavior, especially for images that are not the first one.

imgnum Attribute

The imgnum attribute specifies which image to get. By default, it's 1 (the first image).

• imgnum='1': The first image (default).
• imgnum='2': The second image.
• imgnum='3': The third image.
• ...and so on.

Example: Get the second image from the article.

<img src="{dede:field.imgsrc imgnum='2' /}" alt="第二张图">

function Attribute (Powerful and Flexible)

The function attribute allows you to run PHP functions on the resulting image URL. This is where the real power lies. You can use it to:

• Resize the image: Using DedeCMS's built-in image processing functions.
• Add a watermark.
• Change the path.

Example 1: Resizing the Image

A very common use is to create a thumbnail on the fly. Let's say you want a 200x150 thumbnail.

<!-- 方式一：直接指定宽高（可能会变形） -->
<img src="{dede:field.imgsrc function='str_replace("/uploads","/uploads/thumb",@me)'/}" width="200" height="150" alt="[field:title/]">
<!-- 方式二：使用DedeCMS的缩略图函数（推荐，保持比例） -->
<img src="{dede:field.imgsrc function='firstimg(@me, 200, 150)'/}" alt="[field:title/]">

Note: The firstimg() function might not be available in all DedeCMS versions or configurations. You might need to define it in your include/helpers/extend.helper.php file.

Example 2: Adding a Watermark

<img src="{dede:field.imgsrc function='GetThumbnail(@me, 300, 225, 1)'/}" alt="[field:title/]">

Note: GetThumbnail is another common function for watermarking and resizing. Its availability depends on your specific DedeCMS setup.

What if There is No Image?

This is a critical point. If the article contains no <img> tags, {dede:field.imgsrc /} will output nothing.

This can break your page layout, especially if you have a <img> tag expecting a src attribute.

Solution: Use Conditional Statements (if)

To handle this gracefully, you should wrap the tag in a conditional block.

The correct syntax in DedeCMS is {dede:if}.

Example: Safely displaying an image with a fallback.

{dede:if field.imgsrc}
  <!-- 如果存在图片，则显示 -->
  <a href="[field:arcurl/]">
    <img src="[field:imgsrc/]" alt="[field:title/]" />
  </a>
{else /}
  <!-- 如果不存在图片，则显示一个默认图或什么都不显示 -->
  <a href="[field:arcurl/]">
    <img src="/images/default_thumb.jpg" alt="[field:title/]" />
  </a>
{/dede:if}

Related Tags

It's helpful to know about related tags to understand the full picture:

• {dede:field.litpic /}: This tag gets the dedicated thumbnail of the article. This is the image you upload in the "Advanced Options" when editing an article. This is usually the more reliable and preferred method for thumbnails because it's not dependent on the content.
• [field:array runphp='yes']...[/field:array]: For more complex logic, you can use this block to access all found images. The $fields['imgsrc'] array will contain URLs for all images in the article, allowing you to loop through them.

Summary