How to update image src attribute using user input value

Question

I am building a simple photo editor app using imgix, and I want the image src attribute to be updated when a user input fields receive values. Is there a way to append my new parameters onto the end of the src url?

I have been able to use template literals to create a new url, however I haven't been able to figure out how or if I can update the image src as the user types. Or if the only way to do this would be submitting the changes and show the new image on page reload. I have tried reassigning image.src to the new url, but that hasn't worked.

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;
};

I am able to grab the values but I haven't figured out what I'm needing to do to apply it to the img src url.

It looks like it is actually changing the image source if you inspect the image (not shown in your markup). Your URL is getting longer and appending on each keyup though which doesn't look right. — Bryan, Aug 11 '19 at 17:17

score 0 · Answer 1 · answered Aug 11 '19 at 17:29

Your code changes the URL of the image, but the URL gets longer and longer with each keyup.

Look at this snippet - maybe it helps.

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>

Thank you, that is much cleaner. My only question would be, since I'm seeing it in the inspect, is there a reason I'm not seeing it update the image itself? Whenever I reload, the image src reverts. — K. Downs, Aug 11 '19 at 19:42
1. The code updates the **src attribute of the image**. To see the updated image, you'd have to create the functions handling the modifications. 2. This code snippet doesn't save the user input, so everything reverts to the starting conditions on page reload. If you'd like to see the modifications, then you'd have to create a handler function, and if you want persistent modifications then (somehow) save the new values, so it's carried over between page reloads. (Like a cookie, localStorage, etc.) (If I understood right your concerns about the solution. :) ) — muka.gergely, Aug 11 '19 at 20:29

How to update image src attribute using user input value

1 Answers1