добавить в src в img с помощью jquery

мне нужно изменить это:

<img src="example.jpg" alt="">

в это:

<img src="example.jpg?width=500" alt="">

с помощью jquery, как это можно достичь, потому что я не хочу перезаписывать src, а просто добавляю этот бит ? width = 500.

в целом мой код выглядит примерно так:

<div class="img-wrap"> 
     <p><a href="link">Link to something</a></p>

     <img src="example.jpg" alt=""> 

</div>

ИЗМЕНИТЬ Хорошо, извините, я не указал, но я не могу вносить изменения в тег img. Изображение создается из серверной части. div - единственное, над чем у меня есть власть.


jquery src
person andrelange91    schedule 01.11.2016    source источник
comment
А ваш JS-код?   -  person Rajesh    schedule 01.11.2016
comment
я не смог придумать способ что-то добавить к нему. это мой вопрос.   -  person andrelange91    schedule 01.11.2016

Ответы (5)


arrow_upward
3
arrow_downward

Попробуй это

<script>
  $(".img-wrap p img")[0].src += "?width=500";
</script>

<div class="img-wrap">
  <p><a href="link">Link to something</a>
  </p>
  <img src="example.jpg" alt="">
</div>
person Mamdouh Saeed    schedule 01.11.2016
comment
Я не могу добавить идентификаторы в img. он генерируется серверной частью. - person andrelange91; 01.11.2016
comment
это работает: D Вы были первым, кто это понял, поэтому я даю решение здесь ^^ - person andrelange91; 01.11.2016
comment
Рад помочь вам :) - person Mamdouh Saeed; 01.11.2016

arrow_upward
1
arrow_downward

Вы можете добавить строку в атрибут src.

Редактировать:

Если у вас есть контроль только над div, добавьте к нему идентификатор.

$("#click-me").on("click", function(){
    $("#img-wrapper>img").attr("src", $("#img-wrapper>img").attr("src") + "?s=20");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="img-wrap" id="img-wrapper"> 
     <p><a href="link">Link to something</a></p>
     <img src="https://www.gravatar.com/avatar/7164662/38b30efb16b3d9eb8cc2737a872a79f0" alt="" /> 
     <button id="click-me" type="button">Click Me!</button>
</div>

person Niyoko    schedule 01.11.2016
comment
Я не могу добавить какие-либо идентификаторы или классы в тег img, так как он генерируется из бэкэнда. - person andrelange91; 01.11.2016

arrow_upward
0
arrow_downward 

<div class="img-wrap"> 
 <p><a href="link">Link to something</a></p>
 <img src="example.jpg" id="targetImage " alt=""> 
</div>

добавьте идентификатор изображения для выбора в jquery и с помощью attr вы можете добавить текст к src изображения, как показано ниже

var img= $("#targetImage");
img.attr("src", img.attr("src")+"?width=500");
person Parthasarathy    schedule 01.11.2016
comment
Я не могу добавить к изображению идентификаторы или классы. Тег изображения создается серверной системой. - person andrelange91; 01.11.2016
comment
о, хорошо ... тогда подожди ... дай мне подумать о другом решении - person mrid; 01.11.2016
comment
@ andrelange91 даже вы можете выбрать img, просто указав $ ('img'). attr (src, img.attr (src) +? width = 500) - person Parthasarathy; 01.11.2016
comment
@ andrelange91 есть ли у вас разрешение на создание идентификатора в div? - person Parthasarathy; 01.11.2016
comment
изображение создается пользователем из бэкэнда, поэтому, если в div img-wrap есть изображение, он должен добавить? width = 500 в src. - person andrelange91; 01.11.2016

arrow_upward
0
arrow_downward

Предположим, у вас есть изображение с именем image1

<img src="example.jpg" alt="" id="image1">

Use 

$('#image1').attr('src') = $('img').attr('src') + '?width=500' ;

Это не перезапишет img src, а просто добавит ?width=500 к существующему значению атрибута.

person mrid    schedule 01.11.2016
comment
это бы выбрало бы каждое изображение, не так ли? - person andrelange91; 01.11.2016
comment
Я не могу добавить к изображению идентификаторы или классы. Тег изображения генерируется серверной системой. - person andrelange91; 01.11.2016

arrow_upward
0
arrow_downward 

$("#img-wrap img:first").attr('src', img.attr("src")+"?width=500");

без идентификатора и имени класса для изображения, которое вы можете выбрать с помощью классов элементов DOC верхнего уровня

person Parthasarathy    schedule 01.11.2016