在 HTML 中更改提交时的图像 [关闭]答案

【问题标题】：Change the image on submit in HTML [closed]在 HTML 中更改提交时的图像 [关闭]
【发布时间】：2015-12-26 05:42:04
【问题描述】：

我想在单击按钮时更改按钮的图像。下面是我的代码，但它不起作用。请帮助我。

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Image</title>

    </head>
    <body>
        <h1>My Image</h1>
<p>
        <img src="C:\Users\Hrushikesh\Pictures\iCloud Photos\Downloads\2015\IMG_3695.jpg" alt="HTML5 Icon" style="width:256px;height:256px;">
</p>
        <button onclick="picturechange()"><img src="C:\Users\Hrushikesh\Desktop\star2.jpg" alt="HTML5 Icon" style="width:16px;height:16px;" id="pic1"></button>
        <script>
            function picturechange()
            {
                document.getElementById("pic1").src="C:\Users\Hrushikesh\Desktop\star1.jpg";
            }
        </script>
    </body>
</html>

【问题讨论】：

欢迎来到 Stack Overflow，请务必查看 how to ask a good question。当您寻求调试帮助时，您的问题与主题无关 (see on-topic questions)。还要确保生成一个可重现的示例，提供一个小提琴的 sn-p 可以实现这一点。
参考SO stackoverflow.com/questions/7462119/…上的类似问题

标签： javascript jquery html

【解决方案1】：

此代码应该可以完美运行，根据您的喜好更改它：-]

window.picturechange = function() {
	document.getElementById("pic").src = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Example.svg/120px-Example.svg.png";
};

<p>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Example.jpg/116px-Example.jpg" alt="HTML5 Icon" style="width:256px;height:256px;" id="pic">
</p>
<button onclick="picturechange()">Click Me</button>

【讨论】：

【解决方案2】：

由于以下原因，您的图片可能无法显示：

在加载任何具有完整路径的本地资源之前，您需要添加 file:/// 前缀。
如果您通过 Web 服务器运行网页，您可能会在浏览器中收到错误“不允许加载本地资源”。

【讨论】：

感谢 Ahsan，代码已经生效添加文件后：///
请考虑对我的回答进行投票...谢谢...