Question

我正在尝试更改图片的src，并将其更改为在整个网站上保持这样。

<img id="profile" src="profilePicture.jpg">
<input type="text" name="image" id="imgLink">
<button type="button" id="upload">Upload</button>

jQuery的：

$(document).ready(function () { 
    var link;
    $("#upload").click(function (){
        link = $("#imgLink").val();
        $("#profile").prop('src', link);
    });
    $("#profile").prop('src', link);   
  });

正如您所看到的，我尝试将图像链接存储在全局变量（var链接）中，更改函数内部图像的src，然后再次在外部更改它以便页面加载加载时的图像。

更改图片的src有效，但是一旦我刷新页面或转到另一页并返回，图像就不会再更改了。

如何让它在整个网站上保持更改？

Answer 1

通常，您会在服务器端执行此操作，因为客户端解决方案仅适用于用户正在使用的一个浏览器。

$(function () { 
    //read localstorage
    var link = localStorage.getItem("myImage") || ""; //change "" to default value
    $("#upload").click(function (){
        link = $("#imgLink").val();
        $("#profile").prop('src', link);
        localStorage.setItem("myImage", link); //set localstorage with new value. 
    });
    $("#profile").prop('src', link);   
});

页面加载时更改图像的src

1 个答案: