如何使用 if 语句添加图像答案

【问题标题】：How to add an image with an if statement如何使用 if 语句添加图像
【发布时间】：2015-12-22 15:05:17
【问题描述】：

有没有办法在使用 if 语句将某个短语输入输入时显示图像？这是我的代码

<script type="text/javascript">

    document.getElementById("button").onclick=function() {

        var ask=document.getElementById("ask").value.toLowerCase(); ;
        if (ask =="how tall are the pyramids") {

            document.getElementById("spanId").innerHTML = "146.5 meters";

        } else if (ask== "how tall is the gateway arch") {

            document.getElementById("spanId").innerHTML = "630 feet";

        }

【问题讨论】：

是的，有可能——而且你的代码看起来还不错——有什么问题？如何附加图片？
你可以使用base64图片作为IMG SRC，google一下
伴随出现的文字我希望有一个图像伴随它
stackoverflow.com/questions/5451445/…

标签： javascript if-statement

【解决方案1】：

你可以试试——

document.getElementById("spanId").innerHTML = "<img src='path/arch.jpg'>";

或

document.getElementById("spanId").innerHTML = "<p>630 feet</p><img src='path/gatewayarch.jpg'>";

【讨论】：

【解决方案2】：

您需要做的就是设置图像的路径 - 这将从网络服务器加载图像：

<script type="text/javascript">

document.getElementById("button").onclick=function() {

    var imageSrc = "";

    var ask=document.getElementById("ask").value.toLowerCase(); ;
    if (ask =="how tall are the pyramids") {
        document.getElementById("spanId").innerHTML = "146.5 meters";
        imageSrc = "pyramids.jpg";
    } else if (ask== "how tall is the gateway arch") {
        document.getElementById("spanId").innerHTML = "630 feet";
        imageSrc = "arch.jpg";
    }

    // update the image
    document.getElementById("image_placeholder").src = imageSrc;

您还可以“预加载”所有图像，让 UI 感觉更流畅。为此，您可以在循环中创建 Image 对象并将其 .src 设置为图像的路径。加载后，图像翻转将立即进行。

【讨论】：

【解决方案3】：

是的，有一些方法可以实现你想要的，例如：

if (ask =="how tall are the pyramids") {
  document.getElementById("spanId").innerHTML = "146.5 meters <img src='yourimg.png'>";

或者：

var img = document.createElement('img');

if (ask =="how tall are the pyramids") {
  var span = document.getElementById("spanId");
  span.innerHTML = "146.5 meters";
  img.src = 'yourimg.png';
  span.appendChild(img);

或者，如果您的网络服务器中没有图像，您可以这样做：

if (ask =="how tall are the pyramids") {
  var base64 = 'YOUR_IMAGE_BASE64_STRING';
  document.getElementById("spanId").innerHTML = '146.5 meters <img src="data:image/jpg;base64,' + base64 + '" />';

您可以使用 this converter 将任何图像转换为 base64 字符串。

【讨论】：