按钮的输入值可以是切换后会改变的图像吗?

我有一个按钮,单击该按钮可以显示和隐藏一个元素。还将值更改为“显示”或“隐藏”。我想在按钮的value属性中有一个图像(以及文本),以便在切换时随文本一起更改。如果我没有道理,请看一下代码片段或代码笔,以更好地理解我的问题。

Here is a codepen showing you what I mean visually

这是我的HTML

<div class="spec-proj-briefshowhide">
   <p>
   <input type="button" value="Hide details" id="bt" onclick="toggle(this)">
   </p>
    
  <div style="display:flex;" id="proj-details">

 <div>
 <p>Brief:</p>
  <ul>
    <li>So I have this show hide toggle button working to my liking.</li>
    <li>What I would also like is to have an image along with text in the button.</li>
    <li>You see..? I have the value attribute of the button changing as I click on it to toggle.</li>
    <li>What I would want is an image one with open eyes to represent the displayed element and a close eye to represent when I toggle the button to hide the details.</li>
    <li>I noticed people use image background, especially when they want a button to look like a play button, pause button or a record button. These are static buttons and do not change.</li>
    <li>I want a change of image instead, because I have two images which need to be toggled back and forth</li>
 </ul>
 </div>
</div>
  <p>Here are the two images for the curious kind.<img src="https://i.ibb.co/NjRDMFS/OPENEYE.png" alt="OPENEYE" border="0">
<img src="https://i.ibb.co/yPhD6HF/CLOSEEYE.png" alt="CLOSEEYE" border="0"></p>
  
  <button>Show<img src="https://i.ibb.co/NjRDMFS/OPENEYE.png" alt="OPENEYE" border="0">details</button>
 <button>Hide<img src="https://i.ibb.co/yPhD6HF/CLOSEEYE.png" alt="CLOSEEYE" border="0">details</button>
</div>

我的CSS

.spec-proj-briefshowhide {
           display: flex;
           flex-direction: column;
           justify-content: center;
           align-items: center;
           padding-left: 3em;
           padding-right: 3em;
       }

.spec-proj-briefshowhide input {
           padding: 0.4em;
           color: blue;
           font-size: 0.8em;
           font-weight: 400;
           text-transform: uppercase;
           cursor: pointer;
           background-color: white;
           border: 0.05em solid blue;
           border-radius: 0.5em;
       }
.spec-proj-briefshowhide img {
            max-width:10em;
            padding:2em;
            display:flex;
            flex-direction: column;
        }

button {
  display:flex;
  flex-direction:row;
  align-items:center;
}

和我的JS

function toggle(ele) {
            var cont = document.getElementById('proj-details');
            if (cont.style.display == 'flex') {
                cont.style.display = 'none';

                document.getElementById(ele.id).value = 'Show details';
            } else {
                cont.style.display = 'flex';
                document.getElementById(ele.id).value = 'Hide details';
            }
        }

这是一个片段。

function toggle(ele) {
            var cont = document.getElementById('proj-details');
            if (cont.style.display == 'flex') {
                cont.style.display = 'none';

                document.getElementById(ele.id).value = 'Show details';
            } else {
                cont.style.display = 'flex';
                document.getElementById(ele.id).value = 'Hide details';
            }
        }
.spec-proj-briefshowhide {
           display: flex;
           flex-direction: column;
           justify-content: center;
           align-items: center;
           padding-left: 3em;
           padding-right: 3em;
       }

.spec-proj-briefshowhide input {
           padding: 0.4em;
           color: blue;
           font-size: 0.8em;
           font-weight: 400;
           text-transform: uppercase;
           cursor: pointer;
           background-color: white;
           border: 0.05em solid blue;
           border-radius: 0.5em;
       }
.spec-proj-briefshowhide img {
            max-width:10em;
            padding:2em;
            display:flex;
            flex-direction: column;
        }

button {
  display:flex;
  flex-direction:row;
  align-items:center;
}
<div class="spec-proj-briefshowhide">

   <p>
   <input type="button" value="Hide details" id="bt" onclick="toggle(this)">
   </p>
    
  <div style="display:flex;" id="proj-details">

 <div>
 <p>Brief:</p>
  <ul>
    <li>So I have this show/hide toggle button working to my liking.</li>
    <li>What I would also like is to have an image along with text in the button.</li>
    <li>You see..? I have the value attribute of the button changing as I click on it to toggle.</li>
    <li>What I would want is an image with open-eyes to represent the displayed element and another image close-eyes to represent when I toggle the button to hide the details. Check what I mean by close and open eyes before thinking I am crazy.</li>
    <li>I noticed people use image background, especially when they want a button to look like a play button, pause button or a record button. These are static buttons and do not change.</li>
    <li>I want a change of image instead, because I have two images which need to be toggled back and forth</li>
 </ul>
 </div>
</div>
  <p>Here are the two images for the curious kind.<img src="https://i.ibb.co/NjRDMFS/OPENEYE.png" alt="OPENEYE" border="0">
<img src="https://i.ibb.co/yPhD6HF/CLOSEEYE.png" alt="CLOSEEYE" border="0"></p>
  
  <button>Show<img src="https://i.ibb.co/NjRDMFS/OPENEYE.png" alt="OPENEYE" border="0">details</button>
 <button>Hide<img src="https://i.ibb.co/yPhD6HF/CLOSEEYE.png" alt="CLOSEEYE" border="0">details</button>
</div>