Question

我只是想学习html＆amp;的JavaScript。

我正在使用JSON返回一些值。在值上是一个链接和图像。

http://img.tesco.com/Groceries/pi/118/5000175411118/IDShot_90x90.jpg

然而这张图片对我来说太小了。我可以通过改变相同的225x225

来下载图像

这是我到目前为止所得到的：

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title> Tesco JSONP </title>

  <script   type="text/javascript">
    var pic = "http://img.tesco.com/Groceries/pi/118/5000175411118/IDShot_90x90.jpg"
    var newpic = pic.slice(0,59);
    var bigpic = newpic + '225x225.jpg';
    document.write(bigpic);
  </script>
</head>
<body>

  <img src= "bigpic" />
</body>

</html>

这不是下载图像 - 任何人都可以告诉我我做错了什么，并可能更正我的代码。

祝福。

詹姆斯

Answer 1

好吧，有几件事要经历。

document.write用您告诉的内容重写整个页面，通常不会使用此页面。您应该定位要修改的特定元素，而不是整个页面。
您想要设置图像的来源，因此您必须定位该图像。目标元素的最简单方法是使用ID，因此我们将为此示例添加一个。

新标记：

<body>

   <img id="myImage" />

</body>

如果您愿意，可以设置默认的src属性，但是对于时间，我不会。现在，您拥有上面的图片src属性，因此需要时间进行设置：

document.getElementById("myImage").src = bigpic;

设置变量时，不会引用它们！引用变量将简单地解析引号之间的内容。在您的情况下，您在文档上写的是“bigpic”，而不是变量bigpic

Answer 2

使用replace()代替部分字符串，并为图片添加ID以定位它，因为应该像瘟疫一样避免使用document.write。

要确保该元素可用，请在</body>

之前的底部添加脚本标记

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Tesco JSONP</title>
    </head>

    <body>
        <img id="bigpic" src="bigpic" />
        <script type="text/javascript">
            var pic = "http://img.tesco.com/Groceries/pi/118/5000175411118/IDShot_90x90.jpg"
            document.getElementById('bigpic').src = pic.replace('90x90', '225x225');
        </script>
    </body>
</html>

FIDDLE

Answer 3

给你的img一个id标签，然后：

document.getElementById("imageid").src=bigpic;

将变量添加到img标记

3 个答案: