如何将input输入框值插入img的src属性实现动态条形码生成

步骤1：给条形码img标签添加唯一ID #

修改模态框内的条形码img代码，添加id方便后续定位DOM元素：

<img id="barcodeImg" alt='Barcode Generator TEC-IT' src='https://barcode.tec-it.com/barcode.ashx?data=Nome%5Ct+Cognome%5Cn&code=&multiplebarcodes=false&translate-esc=true&unit=Fit&dpi=96&imagetype=Gif&rotation=0&color=%23000000&bgcolor=%23ffffff&codepage=Default&qunit=Mm&quiet=0&hidehrt=False'/>

步骤2：在输入事件回调中动态替换src属性 #

在你已经绑定的onkeyup事件处理函数中，加入如下逻辑即可：

// 获取输入框值与条形码DOM元素
const nome = document.getElementById('name').value.trim();
const cognome = document.getElementById('cognome').value.trim();
const barcodeImg = document.getElementById('barcodeImg');

// 你已有的必填校验逻辑，校验通过后执行下方代码
if (nome && cognome) {
  // 拼接符合要求的条形码数据：姓名 + 制表符 + 空格 + 姓氏 + 换行
  const barcodeData = `${nome}\t ${cognome}\n`;
  // 编码参数后拼接完整的src地址
  const newSrc = `https://barcode.tec-it.com/barcode.ashx?data=${encodeURIComponent(barcodeData)}&code=&multiplebarcodes=false&translate-esc=true&unit=Fit&dpi=96&imagetype=Gif&rotation=0&color=%23000000&bgcolor=%23ffffff&codepage=Default&qunit=Mm&quiet=0&hidehrt=False`;
  // 替换img的src属性触发重新加载条形码
  barcodeImg.src = newSrc;
  // 如需显示条形码可补充显隐逻辑
  barcodeImg.style.display = 'block';
}

注意事项 #

• 核对输入框的id属性，如果第一个姓名输入框的实际id为nome，将取值代码替换为document.getElementById('nome').value即可，避免id不匹配导致取值失败。
• 此前尝试的PHP插值属于服务端渲染逻辑，仅在页面初次加载时生效，无法响应客户端的输入变化；直接在HTML中插入script变量也只会在页面加载时执行一次，不会随输入内容更新，因此必须在输入事件的回调中动态修改src属性。

内容的提问来源于stack exchange，提问作者Massimo D. N.