使用javascript更改图像src的问题[重复]答案

【问题标题】：Issue changing image src with javascript [duplicate]使用javascript更改图像src的问题[重复]
【发布时间】：2020-08-18 07:44:53
【问题描述】：

我正在尝试根据 javascript 中的变量更改图像 SRC。

我有以下模态：

<div class="modal-body">
    <img src="https://www.w3schools.com/js/landscape.jpg" alt="image" width="400" name="image_modal" id="image_modal">
    <div class="form-group">
        <label>Image Name</label>
        <input type="text" name="image_name" id="image_name" class="form-control" />
    </div>
    <div class="form-group">
        <label>Image Description</label>
        <input type="text" name="image_description" id="image_description" class="form-control" />
    </div>
    <div class="form-group">
        <label>Path</label>
        <input type="text" name="path" id="path" class="form-control" />
    </div>  
</div>
<div class="modal-footer">
    <input type="hidden" name="image_id" id="image_id" value="" />
    <input type="submit" name="submit" class="btn btn-info" value="Edit" />
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

然后我尝试在 JS 中更改初始虚拟 SRC：

...
$.ajax({
   url:"edit.php",
   method:"post",
   data:{image_id:image_id},
   dataType:"json",
   success:function(data)
   {
    $('#imageModal').modal('show');
    $('#image_id').val(image_id);
    $('#image_name').val(data.image_name);
    $('#path').val(data.path);
    $('#image_description').val(data.image_description);
    document.getElementById("image_modal").src = val(data.path);
   }
});

我正在检查 src URL 是否正确，方法是在模式 (data.path) 中显示它并正确输出。

但是当尝试使用document.getElementById("image_modal").src = val(data.path);更改src 时，没有显示图像，就像变量没有被正确解释一样。

【问题讨论】：

一致性问题：当您非常清楚地接受 jQuery 时，为什么还要使用 document.getElementById？为什么那一行不是$("#image_modal").attr("src", ...)？
这能回答你的问题吗？ Changing the image source using jQuery
您是否在控制台中收到任何错误 - 例如404等？
你是对的，迈克。这行得通

标签： javascript jquery image src

【解决方案1】：

你的问题在这里：val(data.path);

除非你已经定义它，否则val() 是未定义的。你应该可以只使用data.path，假设它是你所追求的字符串。

改用这个

document.getElementById("image_modal").src = data.path;

【讨论】：