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

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(){&nbsp; &nbsp;$(this).attr('src', 'images/11_1.jpg'); // default image});