Question

我正在尝试从键盘上输入的文本更新图像src或复制粘贴链接。问题是链接正在更新，但是在和

之间关闭标签后正在更新

这是文本输入字段

    <div class="form-group">
            <input type="text" value="" name="nottitle99" id="title99" class="form-control"></div>

这是用于预览的html

     <div id="icon-small">                          
<img id="preview-title99" name="preview-title99" class="icon" src="square-icon.png">
     </div>

这是jquery

    $("input[id$=title99]").bind("change keyup input",function () {

 $("#preview-title99").prop("src","https://c.ndtvimg.com/2019-04/c4s53qqg_spicejet-shirdi-incident-ani-_625x300_29_April_19.jpg");

  });
   $("input[id$=title99]").keyup();

我得到的输出是这个

      <img id="preview-title99" name="preview-title99" class="icon" src="square-icon.png"> https://www.masala.com/sites/default/files/styles/gallery_slideshow_cache_734/public/images/2019/04/13/AnanyaPandey_0.jpg </img>

我希望在src字段中更新图像src

我尝试了其他类似的事情

         $("#icon-small img").prop("src","https://www.masala.com/sites/default/files/styles/gallery_slideshow_cache_734/public/images/2019/04/13/AnanyaPandey_0.jpg");


     $("img#preview-title99").prop("src","https://www.masala.com/sites/default/files/styles/gallery_slideshow_cache_734/public/images/2019/04/13/AnanyaPandey_0.jpg");

任何指南都会很棒

Answer 1

您的代码看起来不错。也许当您尝试动态设置图像的src属性（即从输入中）时，您正在使用jquery的html函数或使用jQuery innerHTML函数来设置prop属性因为只有这样，图像内部的html才会更新，而不是src。

这是我使用您的代码制作的有效的js小提琴链接。您在输入中输入的所有内容将成为输入下方JSFiddle的图像的src。

在小提琴中的代码以防链接不起作用：

<script>
    $(document).ready(function(){
        $("input[id$=title99]").bind("change keyup input",function () {

             $("#preview-title99").prop("src",$(this).val());

              });
               $("input[id$=title99]").keyup();
    })


</script>

<div class="form-group">
  <input
    type="text"
    value=""
    name="nottitle99"
    id="title99"
    class="form-control"
  />
</div>

<div id="icon-small">
  <img
    id="preview-title99"
    name="preview-title99"
    class="icon"
    src="square-icon.png"
  />
</div>

关闭标签后更新图片src

1 个答案: