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

Question

i'd like a textbox to change the url of an img

Image Code

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

All i want to happen is the img url to changed based on a textbox and for it to change live. it has to be appended onto another url like https://google.com/ + text

An example is 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" /> 

there you go