Django模型字段硬编码HTML无法解析模板上下文变量问题

你现在遇到的解析失败问题，本质是Django模板引擎的运行逻辑导致的：模板引擎只会解析.html模板文件里写死的模板变量、标签，存在数据库content字段里的{{album.image.url}}对引擎来说就是普通文本，safe过滤器的作用只是跳过HTML字符转义，不会触发二次模板解析。
注意：不要为了省事直接把数据库存的内容当模板代码传入渲染，这会带来严重的XSS和代码执行风险，一旦content内容被恶意篡改，攻击者可以直接通过模板语法执行任意逻辑、窃取敏感数据。

核心思路是不要在content里写真实模板变量，改用自定义的、无语法歧义的占位符标记图片插入位置，渲染时通过自定义模板过滤器把占位符替换成真实的图片HTML代码。

具体实现步骤 #

• 约定占位符格式
  编辑文章时，在需要插入图集图片的位置写入固定格式占位符，比如[[ALBUM_IMAGE:图片ID]]，其中数字ID对应当前文章关联图集里的具体图片ID，支持在任意段落位置插入任意数量的图片。
  示例content内容格式：

  第一段正文内容...
  [[ALBUM_IMAGE:3]]
  第二段正文内容...
  [[ALBUM_IMAGE:7]]
  第三段正文内容...
  

• 编写自定义模板过滤器
  在你的Django应用下新建templatetags/article_tags.py文件，写入以下逻辑：正则匹配所有占位符，查询对应图片数据后替换为合法的img标签，最终返回安全的渲染后内容。

  import re
  from django import template
  from django.utils.safestring import mark_safe
  
  register = template.Library()
  # 匹配占位符的正则规则
  ALBUM_IMG_PATTERN = re.compile(r'\[\[ALBUM_IMAGE:(\d+)\]\]')
  
  @register.filter
  def render_article_content(content, article):
      # 一次性取出当前文章关联的所有图集图片，按ID做映射避免重复查库
      img_map = {}
      if hasattr(article, 'album') and article.album:
          # 注意：这里images字段根据你自己的Album模型实际关联字段调整
          for img in article.album.images.all():
              img_map[img.id] = img
      
      def replace_match(match_obj):
          img_id = int(match_obj.group(1))
          target_img = img_map.get(img_id)
          if not target_img:
              return "" # 对应图片不存在时返回空，也可以替换为默认错误占位图
          return f'''
          <img class="img-responsive single_article_image" 
               src="{target_img.image.url}" 
               alt="{getattr(target_img, 'caption', '')}">
          '''
      
      rendered_content = ALBUM_IMG_PATTERN.sub(replace_match, content)
      # 建议在这里加一层HTML白名单过滤，比如用bleach库只允许p/strong/span等合法正文标签，比直接safe更安全
      return mark_safe(rendered_content)
  

• 调整模板渲染逻辑
  原来的正文渲染代码替换为加载自定义过滤器后调用：

  {% load article_tags %}
  {{ article.content|render_article_content:article }}
  

体验优化建议 #

如果你的后台用富文本编辑器编辑文章，可以给编辑器加一个「插入图集图片」的自定义按钮，编辑点击选图后自动把对应格式的占位符插入到光标位置，不需要手动记忆占位符格式，和普通插图操作体验一致。

如果你的图集插入位置有固定规则（比如每2段正文插一张图），不需要精准控制单张图位置，可以直接在渲染时把article.content按段落标签拆分成段落列表，循环渲染段落，每到预设的段落序号时输出对应图片即可。这种方案不需要在正文里加占位符，但灵活度较低，只适合规则固定的场景。

内容的提问来源于stack exchange，提问作者redtomato