点击按钮后图片隐藏，同时按钮的文字变为显示，再次点击按钮图会显示，同时按钮的文
字变为隐藏。
二、案例分析
1、事件源：按钮（button）
2、事件类型：点击（onclick）
3、事件处理程序：
（1）文字内容改变用：innerText
（2）图片是否显示用：display
三、代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示和隐藏图片</title>
<style>
#new {
width: 200px
margin-top: 10px
}
</style>
</head>
<body>
<button id="btn">隐藏</button><br>
<img src="images/img01.jpg" id="new">
<script>
// 1. 获取元素
var btn = document.querySelector('#btn')
var img = document.querySelector('#new')
var index = 1
// 2. 添加事件
btn.onclick = function() {
//法一：
if (index++ % 2 === 1) {
img.style.display = 'none'
this.innerText = '显示'
} else {
img.style.display = 'block'
this.innerText = '隐藏'
}
// 法二
// if (this.innerText === '隐藏') {
很显然从后端返回的是一个图片路径，那么你要做的就是把这个路径塞进img的src里面，如：<img src="路径"/>实现步骤：1.先在html里面定义一个img标签<img src=""/>
2.一般情况下图片地址是一个变量，也就是说首先将后端返回的地址保存在一个变量中，如：var imgsrc = res.data.otherImg(根据接口实际情况获取，我这里只是举例)
2.通过js把地址塞进img里面，如： $('img').attr('src', imgsrc)
这样就能把图片渲染出来了。
这个一般是用css来显示特定内容的。譬如有张图片icon.png，里面有很多内容，便可以在css中这么用。
.sa
{width:20px
height:20px
overflow:hidden
background:url(icon.png)
no-repeat
-20px
-30px}
注解：
宽度和高度是控制显示范围的
overflow:hidden是确保不会有多余显示
background:url(icon.png)是使用图片作为背景显示，并且也只能作为背景显示才能达到这种做法的目的
no-repeat是不会重复，这个不是必须的，不过有会规范一些
-20px
-30px是图片的定位，显示时会将图片按这个坐标来定位
上面只是针对固定大小的显示内容来定义的，如果大小不固定，在background属性中有可能需要更改设置。不过重点是这种方式是这么使用的。
如果大小不固定，也可以这样定义，让背景自适应：
.sa
{width:auto
height:20px
overflow:hidden
background:url(icon.png)
no-repeat
right
bottom}
对于图片2(首页标签)的内容，也是这么使用的：
.a
{width:100px
height:25px
overflow:hidden
background:url(2.png)
no-repeat
left
center}
.a:hover
{background-position:right
center}
这样一来，当鼠标移到元素时，背景定位发生变化，显示的内容便由左边的变成右边的了。
不过你应该对css这方面还不是很了解，目前可能还没有很便捷的方式对这些css进行快速定义，所以也只能告诉你是这么一回事，但未必能帮得上你。
