在HTML中更改提交时的图像

Change the image on submit in HTML

本文关键字：图像 提交 HTML      更新时间：2023-09-26

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

<!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>

这段代码应该可以完美地工作，根据您的喜好进行更改：-]

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>

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

  • 在加载任何具有完整路径的本地资源之前，您需要添加file:///前缀
  • 如果您通过Web服务器运行网页，则浏览器中可能会出现错误"不允许加载本地资源"
相关文章：