使用 document.write() 在页面上显示图像答案

【问题标题】：Showing images on a page with document.write()使用 document.write() 在页面上显示图像
【发布时间】：2020-08-01 17:50:33
【问题描述】：

我正在尝试使用 document.write() 在我的 javascript 文件中发布图像。问题是当我尝试它时，图像总是出现损坏。这是代码。我写错标签了吗？我已经在非 JavaScript 页面上测试了图像，它们似乎显示得很好。

var replay = "yes";
var userChoice = prompt("Do you choose rock, paper or scissors?");
userChoice = userChoice.toLowerCase();
var computerChoice = Math.random();
if (computerChoice < 0.34) {
    computerChoice = "rock";
} else if (computerChoice <= 0.67) {
    computerChoice = "paper";
} else {
    computerChoice = "scissors";
}
var compare = function (choice1, choice2) {
    if (choice1 === choice2) {
        document.write("The result is a tie!");
    }
    if (choice1 === "rock") {
        if (choice2 === "scissors") {
            document.write('<img src="images\orna.jpg\">');
        } else {
            document.write("Computer chose paper. Computer wins.");
        }
    }
    if (choice1 === "paper") {
        if (choice2 === "scissors") {
            document.write("Computer chose scissors. Computer wins.");
        } else {
            document.write("Computer chose rock. Player wins.");
        }
    }
    if (choice1 === "scissors") {
        if (choice2 === "paper") {
            document.write("Computer chose paper. Player wins.");
        } else {
            document.write("Computer chose scissors. Computer wins.");
        }
    }
};
compare(userChoice, computerChoice);

【问题讨论】：

您的某些图片的完整 URL 是什么？ example.com/???
图像在我的闪存驱动器上的一个文件夹中。我的 html 文件比它高一级。所以一个例子是 images\rock.jpg
document.write("");

标签： javascript html image

【解决方案1】：

你几乎明白了，我想你只需要用斜杠替换反斜杠：'<img src="images/orna.jpg">'。这是一个演示（点击“运行”直到获胜）：

var replay = "yes";
var userChoice = prompt("Do you choose rock, paper or scissors?");
userChoice = userChoice.toLowerCase();
var computerChoice = Math.random();
if (computerChoice < 0.34) {
  computerChoice = "rock";
} else if (computerChoice <= 0.67) {
  computerChoice = "paper";
} else {
  computerChoice = "scissors";
}
var compare = function(choice1, choice2) {
  if (choice1 === choice2) {
    document.write("The result is a tie!");
  }
  if (choice1 === "rock") {
    if (choice2 === "scissors") {
      document.write('<img src="http://i.stack.imgur.com/gLr3o.jpg?s=128&g=1">');
    } else {
      document.write("Computer chose paper. Computer wins.");
    }
  }
  if (choice1 === "paper") {
    if (choice2 === "scissors") {
      document.write("Computer chose scissors. Computer wins.");
    } else {
      document.write("Computer chose rock. Player wins.");
    }
  }
  if (choice1 === "scissors") {
    if (choice2 === "paper") {
      document.write("Computer chose paper. Player wins.");
    } else {
      document.write("Computer chose scissors. Computer wins.");
    }
  }
};
compare(userChoice, computerChoice);

【讨论】：

如何使用变量输入图像路径？例如，对于决胜局，我需要使用变量来查看要为平局输出哪个图像。会不会像'<img src="images/" +choice+ ".jpg">'
啊，我现在明白了。谢谢。

【解决方案2】：

不要使用document.write()。这是有害的。相反，您需要做的是创建一个 <div></div> 并将内容附加到其中。

无论如何，你的事情不工作的原因是你没有转义\s。例如，如果您有<img src="images\orna.jpg\">，则\s 充当转义字符，并被忽略。您的字符串 '' 计算结果为 '<img src="imagesorna.jpg">'，这绝对不是您想要的。确保文件路径正确，如果正确，则需要将其更改为

'<img src="images\\orna.jpg\\">'

无论如何，创建一个div，然后使用 jQuery 或纯 Javascript，将元素附加到它们。您可以通过访问其innerHTML 或使用.append() jQuery 方法来做到这一点

【讨论】：

【解决方案3】：

我同意 scrblndr3 的观点，即 document.write 不好。做一些阅读。

为了帮助您了解问题所在，这里有一些解释。

首先，“\”是 Windows 特定的文件路径段分隔符。浏览器和任何基于 unix 的东西都使用“/”来分隔路径段。其次，在你的路径字符串中，你转义了最后的双引号，因为你的字符串是用单引号包裹的，这是不必要的并且是破坏性的。正确的命令是：

document.write('<img src="images/orna.jpg">');

或者如果你的字符串是双引号，你将不得不转义内部双引号，例如：

document.write("<img src=\"images/orna.jpg\">");

【讨论】：