window.location.replace跳转后无法修改img src属性如何解决

你的代码逻辑存在执行时序问题：
当presentImage函数执行到window.location.replace("profile.html")这一行时，浏览器会立刻销毁当前主页的DOM环境与JS执行上下文，开始加载profile.html页面。后面写的document.getElementById("image").src = url;根本不会在新页面生效——一方面执行这行代码时当前主页里根本不存在id为image的元素，另一方面页面跳转后原页面的JS逻辑会被完全清空，根本操作不到新页面的DOM，这也是你哪怕换本地图片路径也加载失败的核心原因。

二选一即可，都是前端跨页面传值的常规实现：

方案1：URL查询参数传值（轻量场景首选） #

实现逻辑简单，不需要额外依赖存储能力：

1. 修改主页里的presentImage方法，把获取到的图片URL编码后拼到跳转地址后面

function presentImage(url) {
    console.log(url)
    // 对url做编码，避免特殊字符导致地址解析异常
    const jumpUrl = `profile.html?imgSrc=${encodeURIComponent(url)}`
    window.location.replace(jumpUrl)
}

2. 在profile.html引入的JS代码中，添加页面加载时的参数解析逻辑，给img标签赋值：

// 等profile页面DOM加载完成后执行
window.addEventListener('DOMContentLoaded', () => {
    const searchParams = new URLSearchParams(window.location.search)
    const targetImgUrl = searchParams.get('imgSrc')
    if (targetImgUrl) {
        document.getElementById('image').src = decodeURIComponent(targetImgUrl)
    }
})

注意：必须确认profile.html页面已经正确引入了你的script.js文件，否则这段解析逻辑不会执行。

方案2：sessionStorage传值（适合多参数/长参数场景） #

如果后续需要跨页面传递用户名等更多数据，或者图片URL过长不适合拼在地址栏，可以用会话级存储临时存值：

1. 修改presentImage方法，跳转前先把图片地址存入sessionStorage

function presentImage(url) {
    console.log(url)
    // 存入临时会话存储，关闭标签页后自动清除
    sessionStorage.setItem('profileImgSrc', url)
    window.location.replace("profile.html")
}

2. 在profile页面的加载逻辑中读取存储值，完成图片赋值后清除临时存储，避免后续刷新页面读取到旧值：

window.addEventListener('DOMContentLoaded', () => {
    const targetImgUrl = sessionStorage.getItem('profileImgSrc')
    if (targetImgUrl) {
        document.getElementById('image').src = targetImgUrl
        sessionStorage.removeItem('profileImgSrc')
    }
})

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