Javascript 更改JSON中使用AJAX返回的图像的路径

每当我 Select colored颜色 the view时，我都想更改图像，所以我编写了一个AJAX来返回该 colored颜色 的乘积.以下是代码:

$(document).on('change', '#colorId', function () {
    GetImages(colorIds)
});
function GetImages(productId) 
{
    $.ajax({
        url: '@Url.Action("GetImages","ProductView")',
        type: 'GET',
        data: { id : productId },
        success: function (data) {

            console.log("Hello " + data);

            var images = [
                data.image1,
                data.image2,
                data.image3,
                data.image4
            ];

            var image = document.querySelectorAll('#product-imgs .product-preview .image');

            for (var i = 0; i < images.length; i++) {
                image.src = '/Contents/img/' + images[i].split('/').pop();
            }
        }
    })
}

json返回JsonResult.正如你可以看到的，它的包含4个图像路径.所以我想改变下面的视图中的图像路径，我收到了Json

<div class="col-md-5 col-md-push-2">
    <div id="product-main-img">
        <div class="product-preview">
            <img class="image" src="~/Contents/img/@Model.ProductItems.Image1" alt="">
        </div>

        <div class="product-preview">
            <img class="image" src="~/Contents/img/@Model.ProductItems.Image2" alt="">
        </div>

        <div class="product-preview">
            <img class="image" src="~/Contents/img/@Model.ProductItems.Image3" alt="">
        </div>

        <div class="product-preview">
            <img class="image"  src="~/Contents/img/@Model.ProductItems.Image4" alt="">
        </div>
    </div>
</div>
<!-- /Product main img -->
<!-- Product thumb imgs -->
<div class="col-md-2  col-md-pull-5">
    <div id="product-imgs">
        <div class="product-preview">
            <img class="image" src="~/Contents/img/@Model.ProductItems.Image1" alt="">
        </div>

        <div class="product-preview">
            <img class="image" src="~/Contents/img/@Model.ProductItems.Image2" alt="">
        </div>

        <div class="product-preview">
            <img class="image"  src="~/Contents/img/@Model.ProductItems.Image3" alt="">
        </div>

        <div class="product-preview">
            <img class="image" src="~/Contents/img/@Model.ProductItems.Image4" alt="">
        </div>
    </div>
</div>

我试了很多方法，但还是不管用.当我改变的时候

 var image = document.querySelector('.image');

它只改变了一个形象.有人知道解决方案吗？如有任何指示，我将不胜感激.感谢您的阅读.

我改变代码像下面的指令和另一个问题是，只有主图像改变image

for (var i = 0; i < imageNodes.length; i++) {
            if (images[i]) {
                imageNodes[i].src = '/Contents/img/' + images[i].split('/').pop();
            }
}

And when I open the webtool I notice there is two different img source in html code . Why doesn't it change together?