S3存储桶图片在AWS API请求后无法在HTML页面更新

页面设有X、Y两个数字输入框，用户输入数字并点击Calculate按钮后，页面底部显示的图片URL已正确切换至目标地址，但页面中的图片始终无法更新为对应图表；将该URL复制到新标签页可正常显示预期图片。

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API Calculator</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>API Calculator</h1>
    <form id="calculator-form">
        <label for="x">Enter value for x:</label>
        <input type="number" id="x" name="x" required>
        <br>
        <label for="y">Enter value for y:</label>
        <input type="number" id="y" name="y" required>
        <br>
        <button type="submit">Calculate</button>
    </form>
    <div id="result">
        <img id="result-image" src="https://s3.amazonaws.com/aerocastwx.com/image_requests/res_plot.png" alt="Result Image">

    </div>
    <div id="image-url">Image URL: </div>
    <script src="app.js"></script>
</body>
</html>

JavaScript代码 #

$(document).ready(function () {
    const form = $('#calculator-form');
    const resultDiv = $('#result');
    const resultImage = $('#result-image');

    form.on('submit', function (e) {
        e.preventDefault();

        const x = $('#x').val();
        const y = $('#y').val();

        const apiUrl = `https://xxx.execute-api.us-east-1.amazonaws.com/september12stage/calculator?x=${x}&y=${y}`;

        $.ajax({
            url: apiUrl,
            method: 'GET',
            dataType: 'json',
            success: function (data) {
            console.log(data);
        
            if (data && data.ans !== undefined) {
                var resultImage = $('#result-image');
                resultImage.attr('src', data.ans);
                resultImage.show();
        
                $('#image-url').text('Image URL: ' + data.ans);
            } else {
                console.error('Invalid API response:', data);
                resultDiv.html('Invalid API response');
                resultImage.hide();
            }
        },
            error: function (xhr, status, error) {
                console.error('Error fetching data from the API:', error);
                resultDiv.html('Error fetching data from the API');
                resultImage.hide();
            }
        });
    });
});

问题核心是浏览器缓存机制：即使图片URL已更新，浏览器可能仍加载缓存中的旧图片，尤其是当新图片URL与旧URL文件名相同（如S3中覆盖同名称文件）或缓存未过期时。以下是三种解决方法：

• 方法1：添加时间戳绕过缓存
  在图片URL后追加唯一时间戳参数，让浏览器认为是全新资源，强制重新请求：

  // 修改success回调中的src设置代码
  var resultImage = $('#result-image');
  const cacheBustedUrl = data.ans + (data.ans.includes('?') ? '&' : '?') + 't=' + new Date().getTime();
  resultImage.attr('src', cacheBustedUrl);
  resultImage.show();
  

• 方法2：使用.prop()替代.attr()
  对于动态变化的DOM属性，jQuery的.prop()比.attr()更可靠：

  // 修改success回调中的src设置代码
  var resultImage = $('#result-image');
  resultImage.prop('src', data.ans);
  resultImage.show();
  

• 方法3：先清空src再重新设置
  先清空图片src，再设置新URL，确保浏览器触发重新加载：

  // 修改success回调中的src设置代码
  var resultImage = $('#result-image');
  resultImage.attr('src', '');
  resultImage.attr('src', data.ans);
  resultImage.show();
  

内容的提问来源于stack exchange，提问作者Kevin Abbot