html - 用所选图像替换硬编码图像
问题描述
我有我正在创建的页面,我可以在其中上传图像并选择图像,但是我的目标是选择图像并让它替换横幅。目前我的横幅是硬编码的,以查看它的位置。我无法让我选择的图像替换横幅。这是我的代码。所有样式和 JS 都是内联 atm。
任何帮助表示赞赏,网络开发不是我的最爱。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="Banner.js"></script>
<title>Thrillful</title>
</head>
<body>
<div>
<header>
<nav class="navbar navbar-inverse" roll="navigation">
<div class="container-fluid">
<div class="navbar-header">
<!-- Nav bar -->
<a class="navbar-brand" id="brand" href="#">THRILLFUL</a>
</div>
<form class="navbar-form navbar-left" id="search-box" action="/action_page.php">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-warning">Submit</button>
</form>
<ul class="nav navbar-nav">
<li><a href="register.html"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="login.html"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>
<!-- Banner -->
<!-- Sandi's Code -->
<div class="w3-content">
<img class="mySlides" src="https://i.imgur.com/ZtdhrUA.jpg" alt="custom_html_banner1"
style="width:100%">
</div>
</header>
<br>
<br>
<br>
<main>
<!-- This uploads the image and the onclick on the iamge allows you to see the image larger for selecting-->
<h1>Image Import</h1>
<form action="/action_page.php">
<input type="file" accept="image/*" name="image" id="file" onchange="loadFile(event)"
style="display: none;">
<p><label type="submit button" for="file" style="cursor: pointer;" class="btn btn-primary" >Upload Image</lable></p>
<p><img id="output" width="1000" onclick="myFunction(this);"/></p>
</form>
</div>
<!-- <div class="row">
<div class="column">
<img src="C:\Users\sandi\Desktop\Classes\Spring2021\Capstone\Thrillful\thrillful\images\banner1.png" alt="Banner" style="width:100%"
onclick="myFunction(this);">
</div>
</div> -->
<div class="container">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<img id="expandedImg" style="width:100%">
<div id="imgtext"></div>
</div>
<div>
Use the Image
</div>
<script>
var loadFile = function (event) {
var image = document.getElementById('output');
image.src = URL.createObjectURL(event.target.files[0]);
};
// This function is only to click on image and expand.
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
expandImg.src = imgs.src;
imgText.innerHTML = imgs.alt;
expandImg.parentElement.style.display = "block";
}
</script>
</main>
<br>
<br>
<br>
<!-- Responsize Footer -->
<footer class="fBrand age-footer font-small special-color-dark pt-4">
<div class="grid-container">
<div class="grid-item">
<h1>Thrillful Logo</h1>
<img src="/images/image0.jpg" alt="logo">
</div>
<div class="subscribe grid-item">
<form class="input-group">
<input type="text" class="form-control form-control-sm" placeholder="Your email"
aria-label="Your email" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-sm btn-outline-white my-0" type="button">Sign up</button>
</div>
</form>
</div>
<div class="social grid-item">
<p>social icons Facbook and instagram</p>
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-instagram"></a>
</div>
</div>
</footer>
</div>
</body>
</html>
解决方案
推荐阅读
- flutter - 如何使用 Flutter Web 进行深度链接?
- java - 如何以编程方式设置视图边距?
- python - 如何在pythreejs中同时为多个对象设置动画,每个对象都有不同的KeyFrameTrack?
- .net - 桌面分布式应用架构
- rabbitmq - Spring Cloud Stream RabbitMQ 添加队列参数
- ruby-on-rails - 在外部为 localhost rails 应用程序提供服务 https
- java - 如何在类似的基于 Java 字符串的枚举中删除通用代码
- javascript - 提高js动画的性能
- code-coverage - 如何忽略覆盖点的整数值?
- c++ - 创建附加到每个节点的节点列表(c ++)