如何通过变量设置img的src属性 避免外部图片URL被拼接当前页URL

问题根因 #

1. 模板中img标签的src属性未使用双引号包裹变量输出，会导致浏览器解析属性值出错；同时如果@image变量本身不携带完整的http:///https://协议头，浏览器会默认将其识别为当前页面下的相对路径，自动拼接当前页面URL作为前缀。
2. 少数场景下@image变量值开头存在不可见的空白字符（换行、空格、零宽空格等），也会导致浏览器无法识别开头的协议头，判定为相对路径进行拼接。

解决方法 #

• 优先修正模板写法，给src属性加上双引号包裹变量输出：

  <img src="<%= @image %>">
  

• 校验@image变量的实际值，确保开头携带完整的HTTP/HTTPS协议头，如果API返回的URL缺失协议头，可在控制器层手动补全：

  # 控制器层补全协议示例
  @image = api_response["image_url"]
  unless @image.start_with?("http://", "https://")
    @image = "https://#{@image}"
  end
  

• 如果调整后仍有异常，可对变量做一次首尾空白字符清理，排除不可见字符影响：

  @image = api_response["image_url"].strip
  

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