在 <img src=.....> 中插入 <input id='name'> 值

Question

如何将存储在输入框中的值插入到 img scr= 标签中。 我找到了这个代码来创建条形码

<div id="aggiungi" class="modal fade" role="dialog">
        <form method="post" class="form-horizontal" role="form" name="invio">
            <div class="modal-dialog modal-lg">
                <!-- Modal content-->
                <div class="modal-content">     
                    <div style='text-align: center;'>
                    <!-- insert your custom barcode setting your data in the GET parameter "data" -->
                       <img 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'/>
                    </div>
                    <div style='padding-top:8px; text-align:center; font-size:15px; font-family: Source Sans Pro,   Arial, sans-serif;'>
                    <!-- back-linking to www.tec-it.com is required -->
                        <a href='https://www.tec-it.com' title='Barcode Software by TEC-IT' target='_blank'>
                        TEC-IT Barcode Generator<br/>
                            <!-- logos are optional -->
                            <img alt='TEC-IT Barcode Software' border='0' src='http://www.tec-it.com/pics/banner/web/TEC-IT_Logo_75x75.gif'>
                        </a>
                     </div>
                </div>
          </form>
 </div> 

我想更改 scr=.... 中的 Nome 和 Cognome 使用插入两个输入框中的值，如下所示：

<input type="text" class="form-control" id="name" name="name">
<input type="text" class="form-control" id="cognome" name="cognome">

最终我将这两个变量也存储在两个 javascrip 变量（javascript 函数）中

编辑中的 PS： 代码在引导模式中

从图片中可以看出，条形码下方的 Nome 和 Cognome 必须采用输入框中插入的值。真的，我只是在填写所有输入框时才尝试显示条形码。我已经在另一个 javascript 函数中将 Nome 和 Cognome 声明为 javascript 变量（var nome = document.getElementById('nome').value; 和 cognome），由这两个输入框上的 onkeyup 事件调用。我的问题是如何在 img scr=... 中更改它们我试图插入为 .... 或

Answer 1

基本上，这是一个关于使用可变参数修改部分 url 字符串（在您的情况下为 data 参数）的问题，以获得预期的 url。 可以使用URLSearchParams 来解决处理 url 参数的问题，如下所示：

let url = new URL('https://barcode.tec-it.com/barcode.ashx?data=Nome%5Ct+Cognome');
let nome = "nameValue";
let cognome = "surnameValue";
const data = `${nome}\\t ${cognome}`;
url.searchParams.set("data", data);
//it prints https://barcode.tec-it.com/barcode.ashx?data=nameValue%5Ct+surnameValue
console.log(url);

然后你可以将新的 url 存储为你的 img 标签的 src 属性。