脚本更改下拉列表中的图像 - 缺少图像

Question

我有一小段JavaScript，它根据下拉列表更改图像。它当前工作并根据需要更改图像。不幸的是，如果图像不存在，它会显示丢失的图像图标，我宁愿它保留默认图像。我的脚本是 -<script>$(function() {    $("#input_1").change(function(){        var selectedImage = $(this).find(':selected').val();        val = $("#input_1 option:selected").text();        $("a.lb:first").html( "<img src=images/11_" + selectedImage + ".jpg>");        $('a.lb:first img').addClass( "img-fluid" );    });});</script>我的网页是 -<img src="images/11_1.jpg" alt="Objective Marker Bases" title="Objective Marker Bases" class="img-fluid"><select name="id[1]" required="required" aria-required="true" id="input_1" class="form-control"><option value="" selected="selected">--- Please Select ---</option><option value="1">White</option><option value="2">Yellow (+£1.00)</option><option value="4">Blue</option></select>

Answer 1

您可以将事件侦听器放在映像上。

$('a.lb:first img').on('error', function(){

   $(this).attr('src', 'images/11_1.jpg'); // default image

});