javascript - 使用javascript将图像src更改为本地图像?
问题描述
第一次在这里接触javascript,所以请多多包涵。我的文件结构如下所示:
我想使用 js 更改我的 HTML 中的图像。以下是相关的 HTML 代码:
<!DOCTYPE html>
<html>
<head>
<title>Assignment 3A</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style/assignment_3.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="data/data.js"></script>
<script src="script/htmlMaker.js"></script>
<script src="script/assignment_3.js"></script>
<script id="news-detail-template" type="text/html">
<img class='news_photo' src='{{photo}}' >
<div class='news_heading'>{{heading}}</div>
<div class='date'>{{Date}}</div>
<div class='news_detail'>{{details}}</div>
</script>
<script id="news-item-template" type="text/html">
<div news_id='{{id}}' class='news_item' > {{heading}} </div>
<img class='news_img' src='data/NBA.jpg'>
</script>
</head>
<body>
<div class="newsDiv">
<div class="left">Latest</div>
<div id="news" class="marquee"></div>
<img id="toggle" class="right" src="data/pause.png" onclick="toggle(this)">
</div>
<div id="detail" class="detail">
</div>
</body>
</html>
然后是assignment_3.js中对应的js代码:
function toggle(image) {
if (image.src != "data/pause.png")
{
image.src='data/pause.png';
}
else if (image.src == "data/pause.png")
{
image.src='data/play.png';
}
}
显然,这里有些不对劲,因为浏览器似乎根本无法识别我的图像路径。我将如何正确地做到这一点?
解决方案
使用 时image.src
,它会返回图像的完整路径。在这种if
情况下,您只检查图像的相对路径。要检查图像的相对路径,您可以使用image.getAttribute('src')
.
function toggle(image) {
if (image.getAttribute('src') == "data/pause.png") {
image.setAttribute('src', 'data/play.png');
} else {
image.setAttribute('src', 'data/pause.png');
}
}
<body>
<div class="newsDiv">
<div class="left">Latest</div>
<div id="news" class="marquee"></div>
<img id="toggle" class="right" src="data/pause.png" onclick="toggle(this)">
</div>
<div id="detail" class="detail">
</div>
</body>
推荐阅读
- angularjs - 我想通过 angularjs 中的路由传递学生 ID 来显示学生详细信息。但我做不到
- ios - 仅显示 7 个 uicollectionview 单元格
- docker - 如何在 kubernetes pod 中初始化 systemd 服务?
- apache-camel - Camel rest - 允许特定 ip 访问发送请求
- javascript - 最喜欢的图标和样式未出现在实时网站上
- codeigniter - 如何将此关键字用于存储变量
- python - using a if statement inside django model that is updating the model when threshold is reached
- c# - how to get records from db having one common column values with another list?
- html - W3C 支持的滚动条自定义
- javascript - 带有类别列表中字典数组的 JS Autobuild 表