Как обновить атрибут src изображения, используя введенное пользователем значение

Question

Я создаю простое приложение для редактирования фотографий, используя imgix, и я хочу, чтобы атрибут image src обновлялся, когда поля ввода пользователя получают значения. Есть ли способ добавить мои новые параметры в конец src url?

Мне удалось использовать литералы шаблонов для создания нового URL, однако я не смог выяснить, как или можно ли обновить изображение src по мере ввода пользователем. Или, если единственный способ сделать это - отправить изменения и показать новое изображение при перезагрузке страницы. Я попытался переназначить image.src на новый URL, но это не сработало.

HTML:

<form id="form" class="input-container">
  <input type="text" placeholder="Enter Text" id="title"/>
  <input type="text" placeholder="Enter Hexcode Color" id="overlay" />
  <input type="submit" value="Apply Changes" id="edit-submit">
</form>


JavaScript:
let form = document.getElementById("form");
let titleInput = document.getElementById("title");
let encodedTitle = encodeURI(titleInput);
let overlayColor = document.getElementById("overlay");
let image = document.getElementById("image");
let timeout = null;

form.onkeyup = function(e) {
  let encodedTitle = "&txt=" + encodeURI(titleInput.value);
  let newColor = "&blend=" + overlayColor.value;
  let url = new URL(`${image.src}`);
  url = `${url}${encodedTitle}${newColor}`;
  console.log(url);
  document.getElementById("url-result").value = url;
  image.src = url;
};

Я могу получить значения, но я не понял, что мне нужно сделать, чтобы применить его к URL-адресу img src.

Answer 1

Ваш код изменяет URL-адрес изображения, но URL-адрес становится все длиннее и длиннее с каждым обновлением ключа.

Посмотрите на этот фрагмент - возможно, это поможет.

let form = document.getElementById("form");
let titleInput = document.getElementById("title");
let encodedTitle = encodeURI(titleInput);
let overlayColor = document.getElementById("overlay");
let image = document.getElementById("image");
let timeout = null;

// URL base for your image - so it doesn't get longer-and-longer
// with each keyup
let baseURL = image.src

// just a display element, so you can see the URL created
let display = document.getElementById('new-url')

form.onkeyup = function(e) {
  const newURL = `${baseURL}&txt=${encodeURI(titleInput.value)}&blend=${overlayColor.value}`
  document.getElementById("url-result").value = newURL;
  image.src = newURL
  display.textContent = newURL
};

img {
  width: 100px;
  height: 100px;
}

<img id="image" src=""><br />
<label for="url-result">URL Result:
<input type="text" id="url-result">
</label>
<div>Display new URL: <span id="new-url"></span></div>
<form id="form" class="input-container">
  <input type="text" placeholder="Enter Text" id="title" />
  <input type="text" placeholder="Enter Hexcode Color" id="overlay" />
  <input type="submit" value="Apply Changes" id="edit-submit">
</form>