在网站开发中，调用多张远程图片并正确展示是一项常见需求。本文将详细介绍如何从数据库中提取图片地址，并在前端页面中展示这些图片。以下是具体实现步骤与代码示例。
首先，我们需要明确数据存储的位置。上传的原图通常存储在表 `pre_portal_attachment` 的 `attachment` 字段中，而远程图片和文字内容则存储在 `pre_portal_article_content` 表的 `content` 字段中。直接调用 `content` 字段会同时获取文字和图片，因此需要通过正则表达式提取图片的 `src` 地址。
### 实现步骤 #### 1. 获取完整文章内容 在列表循环（loop）内添加以下代码，用于从数据库中获取对应的文章内容：
上述代码的作用是从 `portal_article_content` 表中根据 `aid` 提取 `content` 字段的内容，并将其赋值给变量 `$article_all`。
#### 2. 提取图片地址 接下来，使用正则表达式提取 `content` 字段中的所有图片地址。代码如下：
这段代码会匹配所有的 `` 标签，并提取其中的 `src` 属性值。提取结果会被存储在数组 `$matches[1]` 中。
#### 3. 循环输出图片 最后，在前端页面中通过循环输出提取到的图片地址。以下是完整的 HTML 和模板代码： 



    
        

            
                
    
                    
                        
  • {$value['title']}
    •
这段代码会在页面上以列表形式展示所有提取到的图片。每张图片都会带有 `alt` 属性，其值为文章标题。
### 注意事项 - **性能优化**：如果文章内容较多，建议对数据库查询进行优化，避免频繁访问数据库。 - **图片格式支持**：正则表达式中仅支持 `.gif`、`.jpg` 和 `.png` 格式的图片。如果需要支持其他格式，请修改正则表达式。 - **安全性**：确保从数据库中提取的内容经过安全过滤，防止 XSS 攻击。
通过以上步骤，您可以轻松实现从数据库中提取并展示多张远程图片的功能。这种方法不仅适用于文章内容的图片展示，还可以扩展到其他场景，如产品详情页或新闻资讯页面。希望本文对您有所帮助！