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

Posted 2023-03-15

【中文标题】使用javascript更改图像src的问题[重复]

【英文标题】：Issue changing image src with javascript [duplicate]

【发布时间】：2020-08-18 07:44:53

【问题描述】：

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

我有以下模态：

<div class="modal-body">
    <img src="https://www.w3schools.com/js/landscape.jpg"   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等？

你是对的，迈克。这行得通

【参考方案1】：

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

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

改用这个

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