Get image variable src attribute

Question

I have an image inside a div and an input outside of the div, I'm trying to take each image source and put it inside the input's value, I want the image as a variable, how can I take the source of this variable and put it in the input's value?

var image = "img"
console.log('image');
$("input").val(image.attr('src'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img src="http://via.placeholder.com/350x150">
</div>
<input type="text">

<div>
<img src="http://via.placeholder.com/300x150">
</div>
<input type="text">

<div>
<img src="http://via.placeholder.com/250x150">
</div>
<input type="text">

This is essentially the same as [How to reach the element itself inside jQuery’s `val`?](/q/16710521/4642212). It’s weird how you did `image.attr('src')`, as if strings had an `attr` property. — Sebastian Simon, Feb 08 '22 at 04:36

score 3 · Answer 1 · edited Mar 01 '18 at 22:17

3

You could loop through them and get the source of everyone then affect it to the next input :

$('img').each(function() {
  var image = $(this);

  //Using the variable 'image'
  image.closest("div").next("input").val( image.attr('src') );

  //Or just like
  $(this).closest("div").next("input").val( this.src );
});

$('img').each(function() {
  var image = $(this);

  image.closest("div").next("input").val(image.attr('src'));
})

input {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <img src="http://via.placeholder.com/350x150">
</div>
<input type="text">

<div>
  <img src="http://via.placeholder.com/300x150">
</div>
<input type="text">

<div>
  <img src="http://via.placeholder.com/250x150">
</div>
<input type="text">

edited Mar 01 '18 at 22:17

halfer

19,824
17
99
186

answered Dec 11 '17 at 20:50

Zakaria Acharki

66,747
15
75
101

1

You could make `.val(image.attr('src'))` just `.val(this.src)`instead and kill the extra `image` variable – j08691 Dec 11 '17 at 20:53
Updated... I just tried to fit the _I want the image as a variable_ part.. – Zakaria Acharki Dec 11 '17 at 20:56
I don't know if the OP meant that literally but either way – j08691 Dec 11 '17 at 21:05

score 0 · Answer 2 · answered Dec 11 '17 at 20:59

It's really good practice to pack your logical component into a single DOM node. The way you have it structured, there's no logical connection between the image and the input, other than the fact that one is beside the other. Simply because Sheila sits in the cubicle beside mine doesn't mean we're functioning together.

Instead, see what I've got below -- each image/input is contained in a div. The only image that an input should see is right in its same container. Now Sheila is in the same cubicle as me, we're now working on the same thing and can reference each other.

And, rather than the image and the input needing to know about each other, I'm asking the container itself to set those values. By doing this, the pieces are a little more loosely coupled.

var containerEls = $(".container");

containerEls.each(function(){
  var imgEl = $(this).find("img");
  var inputEl = $(this).find("input[type=text]");
  inputEl.val(imgEl.attr("src") );
});

input {
 width: 400px;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div>
<img src="http://via.placeholder.com/350x150">
</div>
<input type="text">
</div>
<div class="container">
<div>
<img src="http://via.placeholder.com/300x150">
</div>
<input type="text">
</div>
<div class="container">
<div>
<img src="http://via.placeholder.com/250x150">
</div>
<input type="text">
</div>

score 0 · Answer 3 · answered Dec 11 '17 at 21:04

Use val(function) to loop through all the inputs individually Then traverse to the instance specific image to return the value

$("input").val(function() {
  return $(this).prev().find('img').attr('src');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <img src="http://via.placeholder.com/350x150">
</div>
<input type="text">

<div>
  <img src="http://via.placeholder.com/300x150">
</div>
<input type="text">

<div>
  <img src="http://via.placeholder.com/250x150">
</div>
<input type="text">

Get image variable src attribute

3 Answers3