将变量添加到img标签

Question

I am just trying to learn html & javascript. 我只是想学习html和javascript。

I am using JSON to return some values. 我正在使用JSON返回一些值。 On of the values is aa link yo an image. 这些值中的一个是图像的链接。

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

However this image a too small for my use. 但是，此图像对于我来说太小了。 I can download an image just by changing the same ling with 225x225 我可以通过更改225x225的相同铃声来下载图像

This is what I have got so far: 到目前为止，这是我得到的：

<!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>

This is not downloading the image - can any one advise what I am doing wrong and possibly correct my code. 这不是下载映像-任何人都可以建议我做错了什么，并可能更正我的代码。

Best wishes. 最好的祝愿。

James 詹姆士

Answer 1

Well, a couple things to run through. 好吧，要完成几件事。

document.write rewrites your entire page with what you tell it to, this is typically not used. document.write使用您告诉的document.write重写整个页面，通常不使用。 You should target a specific element to modify, not the entire page. 您应该定位要修改的特定元素，而不是整个页面。
You want to set the source of an image, so you'll have to target that image. 您要设置图像的来源，因此必须定位该图像。 The easiest way to target elements is with an ID, so we'll add one for this example. 定位元素的最简单方法是使用ID，因此在此示例中将添加一个ID。

New markup: 新标记：

<body>

   <img id="myImage" />

</body>

You can set a default src attribute if you'd like, but for time, I won't. 您可以根据需要设置默认的src属性，但是我暂时不会。 Now, you have your image src attribute above, so its time to set it: 现在，您在上方具有了图像src属性，因此可以进行设置了：

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

When setting variables, you will NOT quote them! 设置变量时，您不会引用它们！ Quoting the variable will simply parse what's between the quotes. 引用变量只会解析引号之间的内容。 In your case, you were writing the words "bigpic" on the document, not the variable bigpic 在您的情况下，您是在文档上写了“ bigpic”一词，而不是变量bigpic

Answer 2

Use replace() to replace parts of the string instead, and add an ID to the image to target it, as document.write should be avoided like the plague. 使用replace()代替字符串的一部分，并在图像上添加一个ID作为目标，因为应该避免像瘟疫一样避免document.write 。

To make sure the element is available, add the script tag at the bottom, before </body> 为了确保该元素可用，请在</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 个解决方案

解决方案1
2 2013-12-27 15:16:04

解决方案2
2 已采纳 2013-12-27 15:16:51

解决方案3
0 2013-12-27 15:15:42

将变量添加到img标签

问题描述

3 个解决方案

解决方案1 2 2013-12-27 15:16:04

解决方案2 2 已采纳 2013-12-27 15:16:51

解决方案3 0 2013-12-27 15:15:42

解决方案1
2 2013-12-27 15:16:04

解决方案2
2 已采纳 2013-12-27 15:16:51

解决方案3
0 2013-12-27 15:15:42