如何用HTMX替换img元素的src属性？

核心错误点 #

1. 交换模式使用错误：你用的hx-swap="src"是HTMX针对img元素自身触发请求的快捷交换方式，但当触发元素是表单时，这个模式会导致HTMX错误地将响应内容当作HTML节点插入到img标签内部，而非直接赋值给src属性。
2. 响应格式不匹配：后端返回的URL可能以text/html类型返回，HTMX会将其解析为HTML内容处理，而非纯文本属性值，进而生成错误的</src>标签。
3. 表单触发逻辑无效：你的表单是空的，hx-trigger="change"没有可触发的控件（比如input、select），这个触发器不会生效。

修正方案 #

1. 修正交换模式 #

将hx-swap="src"改为hx-swap="attribute: src"，明确告诉HTMX将响应内容赋值给目标元素的src属性：

<form hx-post="/myurl" hx-trigger="load,change" hx-target="#output" hx-swap="attribute: src">
  <!-- 添加表单控件，比如select/input，否则change触发器无效 -->
  <select name="img_param">
    <option value="default">默认图片</option>
    <option value="other">其他图片</option>
  </select>
</form>

<img id="output" src=""/>

2. 确保后端响应格式 #

后端返回URL时，需设置响应头Content-Type: text/plain，返回内容仅为纯文本的图片路径，不要包含任何HTML标签或多余字符。

3. 完善表单触发逻辑 #

在表单内添加可交互的控件（如select、input），这样change触发器才能在用户操作时触发表单提交。如果仅需要页面加载时触发一次，可保留load触发器，但建议给表单设置默认值确保提交有效。

额外说明 #

你看到的空class=""是HTMX交换过程中生成的临时属性，只要响应是纯文本URL且交换模式正确，这个空class会自动消失，不会影响功能。

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