javascript - 更改图像源会导致图像为空

Question

我刚刚弄清楚如何使用 javascript 更改图像的源，现在它不断将元素设置为空白图像，就好像它找不到文件路径一样，即使当我控制单击 Visual Studio 中的路径时它显示我是正确的图像。这是我更改图像源的代码:

setTimeout(function(){userImg.setAttribute('src', "‪file:///C:/Users/My%20Name/Desktop/websites/rockpaperscissors/images/paper.png")}, 300);

<小时/>

运行片段

<小时/>

setTimeout(function() {
  userImg.setAttribute('src', "‪https://www.pinclipart.com/picdir/middle/327-3278638_note-clipart-blank-paper-png-download.png")
}, 300);

<title>
  Rock Paper Scissors Game
</title>
<header>
  <h1>Rock Paper Scissors</h1>
</header>
<div class="score-board">
  <div id="user-label" class="badge">user</div>
  <div id="computer-label" class="badge">comp</div>
  <span id="user-score">0</span>:<span id="computer-score">0</span>
</div>
<div class="result">
  <p>Make Your Move!</p>
</div>
<div class="choices">
  <div class="choice" id="r">
    <img src="images/rock.png" width="115" height="95">
  </div>
  <div class="choice" id="p">
    <img src="images/paper.png" width="120" height="120">
  </div>
  <div class="choice" id="s">
    <img src="images/scissors.png" width="130" height="110">
  </div>
</div>
<div class="fighters">
  <div class="fighter" id="u">
    <img id="userimg" src="images/rock.png" width="370" height="300">
  </div>
  <div class="fighter" id="c">
    <img id="compimg" src="images/rockflipped.png" width="370" height="300">
  </div>
</div>
<div class="squares">
  <div class="square" id="userSquare"></div>
  <div class="square" id="computerSquare"></div>
</div>
<script src="app.js" charset="utf-8"></script>

Answer 1

您不想使用精确文件路径，特别是如果它最终将托管在服务器上。您需要做的是从 IIS、Apache、Nginx、Node.js、Xaamp、Wamp/Lamp/Mamp 或其他一些 Web 服务器为您的网站提供服务，以便您可以使用如下所示的相对路径:

setTimeout(function(){userImg.setAttribute('src', "‪/images/paper.png")}, 300);

在为 website.com 提供服务的地方，您可以使用包含该网站的文件夹中的目录以及/images/js/css 等子文件夹来获取您的资源。所以它看起来像这样:

|_ website root folder
   |_ index.html
   |_ images
      |_ yourimage.png 

使用相对路径，您可以获得更好的安全性，并且这是标准做法。当您使用精确的文件路径时，如果您托管网站，您可能会遇到从本地文件系统到安全问题的许多问题。此外，在您的计算机外部无法访问确切的路径，因此您以后无论如何都必须更改它。