如何防止img标签代码在text类型input输入框中被渲染为图片

异常渲染的核心原因是未对输出到HTML属性的字符串做实体转义：直接把包含尖括号、双引号的img标签代码输出到input的value属性中时，浏览器会将这些特殊字符识别为HTML语法标记，要么截断value属性值，要么直接把标签解析为实际DOM元素，无法按纯文本形式展示代码。

方案1：转义后输出到input（最小改动） #

使用PHP原生htmlspecialchars()函数对要输出到value属性的内容做HTML实体转义，函数会自动将尖括号、双引号、&符号等特殊字符转换为对应的实体编码，浏览器会将转义后的内容识别为纯文本，不会解析为实际标签。
修改后的输入框代码：

<input type="text" id="pixel_url_<?php echo $link_id;?>" 
value="<?php echo htmlspecialchars($pixel_url, ENT_QUOTES, 'UTF-8');?>" 
class="form-control" 
placeholder="Link URL">

参数说明：ENT_QUOTES配置会同时转义单引号和双引号，避免属性值被提前截断；指定UTF-8编码可以避免乱码问题。

转义后页面源码中value属性内的内容会以实体形式存在，输入框前端展示的是完整的img原始代码，不会渲染为实际图片，用户可直接选中复制完整可用的标签代码。

方案2：改用textarea优化长代码展示（可选） #

如果需要展示的代码长度较长，单行input容易出现内容显示不全的问题，可以替换为多行文本域，同样配合转义函数输出，展示和复制体验更好：

<textarea id="pixel_url_<?php echo $link_id;?>" 
class="form-control" 
rows="1"
placeholder="Link URL"><?php echo htmlspecialchars($pixel_url, ENT_QUOTES, 'UTF-8');?></textarea>

可以通过CSS调整textarea样式模拟单行输入框效果，同时支持内容过长时滚动查看完整代码。

转义后输出到页面源码的value内容格式如下，浏览器可正确识别为纯文本属性值：

<img src="https://example.com/pixel/action?link=25&att=2&ref=" width="1" height="1">

不会再出现把img代码解析为1*1透明像素图的异常问题。

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