如何获取图像链接以根据文本框实时更改？

Question

我想要一个文本框来更改img的网址

图片代码

<img src="http://url.com/ text the user types">

我要做的就是根据文本框更改img url，并对其进行实时更改。它必须附加到另一个网址上，例如https://google.com/ +文字

一个例子是https://webcode.tools/html-generator/image

Answer 1

const textBox = document.getElementById('text-box');
const img = document.getElementById('image');

textBox.addEventListener('input', (e) => {
  img.src = `https://google.com/${e.target.value}`
})

<input type="text" id="text-box" placeholder="Enter pic url" />
<img src="" alt="your image" id="image" />

你去了