Javascript 更改下拉菜单中的图片 - 缺少图片

Question

我有一小块 JavaScript 可以根据下拉菜单更改图像。它目前可以正常工作并按应有的方式更改图像。不幸的是，如果图像不存在，它会显示丢失的图像图标，我宁愿它保留默认图像。

我的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>

我的HTML是-

<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
});

Javascript 更改下拉菜单中的图片 - 缺少图片

Javascript change image on dropdown - missing image

html

javascript

jquery

image

drop-down-menu