Django中src={{form.image_url}}无法渲染图片但URL存在如何解决

核心原因 #

直接调用{{ form.image_url }}输出的是Django表单字段对应的表单输入控件HTML代码，而非你预期的URL字段值。将这段HTML直接塞进<img>的src属性中会破坏原有HTML标签结构，导致引号提前闭合，最终出现图片无法加载、后续HTML代码直接暴露在页面上的问题。

解决方法 #

• 方案1：调用表单字段的value属性获取实际URL值
  将模板中img标签的代码修改为：

  <img src="{{ form.image_url.value }}" alt="Image of product"/>
  

• 方案2：如果当前使用的是绑定了模型实例的ModelForm，可直接调用实例的字段值，兼容性更强：

  <img src="{{ form.instance.image_url }}" alt="Image of product"/>
  

可选优化 #

如果URL中存在引号、特殊字符可能破坏HTML结构，可额外添加escape过滤器做转义处理：

<img src="{{ form.image_url.value|escape }}" alt="Image of product"/>

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