How to Pass multiple Image Src in Jquery

Question

Iam Using Jquery for assign Image Src dynamically.

This is my HTML Code:

 <img src="" id="picNameId" class="picNameId" name="picNameId" style="height: 100px; width: 100px; display: none;">
 <input type="hidden" name="ticketFileAttahmentName" id="ticketFileAttahmentName" value=""> <br>

This is my Jquery Code:

 var ticketFileAttahmentName=$("#ticketFileAttahmentName").val();
 if(ticketFileAttahmentName!='')
     {

       var ticketFileAttahmentName1=ticketFileAttahmentName.split("|");
       for(i=0;i<ticketFileAttahmentName1.length;i++)
           {
              if(ticketFileAttahmentName1.length>1)
                 {
                    var file = ticketFileAttahmentName1[i];
                    var src="/xxxxxx/files/"+file;
                    document.getElementById("picNameId").src = src;
                    $("#picNameId").src = src; 
                    $("#picNameId").show(); 
                 }else{
                   var src="/xxxxxx/files/"+ticketFileAttahmentName;
                   document.getElementById("picNameId").src = src;
                   $(".picNameId").src = src; 
                   $(".picNameId").show(); 
                }
           }
     }

Iam getting all file names in console.log

But iam unable to set display multiple files for same input.

For Single File iam able to display.

What do you want to accomplish? This code will replace the img src at each iteration. If you want to display several images you'll have to add one img element for each filename. — henrikenblom, Oct 14 '17 at 12:07

score 0 · Accepted Answer · answered Oct 14 '17 at 12:24

A quick way to solve this would be something like this:

HTML:

<div id="picHolder></div>
<input type="hidden" name="ticketFileAttahmentName" id="ticketFileAttahmentName" value=""> <br>

Javascript/jQuery:

var ticketFileAttahmentName=$("#ticketFileAttahmentName").val();
 if(ticketFileAttahmentName!='')
     {

       var ticketFileAttahmentName1=ticketFileAttahmentName.split("|");
       $('#picHolder').empty();
       for(i=0;i<ticketFileAttahmentName1.length;i++)
           {
               var file = ticketFileAttahmentName1[i];
               var src="/xxxxxx/files/"+file;
               var pic = $('<img class="picNameId" name="picNameId" style="height: 100px; width: 100px; display: none;">');
               pic.attr('src', src); 
               $('#picHolder').append(pic);
           }
     }

score 0 · Answer 2 · answered Oct 14 '17 at 12:28

You can't make multiple images in one image tag. You can however create new img tags for every image. Try running the snippet below:

var ticketFileAttachmentName = document.getElementById(
  "ticketFileAttachmentName"
).value;

var ticketFileAttachmentName1 = ticketFileAttachmentName.split("|");

for (i = 0; i < ticketFileAttachmentName1.length; i++) {
  var elem = document.createElement("img");
  elem.src = "https://placebear.com/100/" + ticketFileAttachmentName1[i];
  document.getElementById("pictures").appendChild(elem);
}

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

<div id="pictures"></div>
<input type="hidden" name="ticketFileAttachmentName" id="ticketFileAttachmentName" value="100|101|102|103|104|105|106|107|108|109|110|111">

I removed the bottom conditional statement since I'm not sure what it will do here.

score 0 · Answer 3 · answered Oct 14 '17 at 12:38

wront use you need replaced
$(".picNameId").src = src;

to

$("#picNameId").attr("src",src)

see at more visit Changing the image source using jQuery

http://api.jquery.com/attr/

maybe yours real questions try Css based src set https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/

https://www.sitepoint.com/how-to-build-responsive-images-with-srcset/

for example thats a one img and 3 resurces.

<img src="images/space-needle.jpg"
srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w,
images/space-needle-hd.jpg 600w">

score 0 · Answer 4 · answered Sep 19 '20 at 22:00

$("#imgInp").change(function() {


    if ($(this).prop('files')[0]) {
        var reader = new FileReader();

        reader.onload = function(e) {
            $('.blah').last().attr('src', e.target.result);
        }

        reader.readAsDataURL($(this).prop('files')[0]); // convert to base64 string
    }

});

How to Pass multiple Image Src in Jquery

4 Answers4