Question

我想知道有没有办法只在javascript中指定图像的来源。所以如果我有以下图片标签：

<img class="CustomerPict" id="Image" alt="name" src=src style="left: 18px; top: 18.5px;">

在javascript中我想声明变量src？任何帮助将不胜感激！

Answer 1

HTML无法使用JavaScript设置属性值。

您需要将src设置为默认值（可能是1x1透明gif），然后稍后使用JavaScript更改它，或者从JS生成整个img元素。

<img class="CustomerPict" id="Image" alt="name" src="1x1.gif" style="left: 18px; top: 18.5px;">
<script>
    document.getElementById('Image').src = src;
</script>

或

<script>
    var container = document.getElementById('image-container');

    var image = document.createElement('img');
    image.src = src;
    image.id = "Image";
    image.className = "CustomerPict";
    image.alt = "name";
    // You can move these to a style sheet ruleset with a class or id selector
    image.style.left = "18px";
    image.style.top = "18.5px";

    container.appendChild(image);
</script>

Answer 2

document.getElementById('Image').src = 'http://domain.com/picture.png';

Answer 3

<img src="src" id="Image">

document.getElementById('Image').setAttribute('src', 'http://www.gravatar.com/avatar/c9bef77e2d810012d8c96f84b9fc9bc9?s=32&d=identicon&r=PG');

Answer 4

img=document.getElementById("Image");
console.log(img.src);

或更好的方式（在我看来）

img=document.getElementsByTagName("img");
console.log(img[0].src);

然后你可以为img [0] .src指定一个值

Answer 5

您可以使用img-tags onerror属性将其设为oneliner：

<img src='not-found.zzz' onerror='this.src=window.src;'>

但请确保window.src（全局范围）中的指定图像正确或脚本将永远循环...

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset='UTF-8'>
     <script type='text/javascript'>
         var src = 'my_real_image.png';
     </script>
 </head>
 <body>
     <img src='not-found.zzz' onerror='this.src=window.src;'>
 </body>
 </html>

DEMO：http://jsbin.com/ozimov/1/embed

在javascript中指定图像源

5 个答案: