Question

无论如何，我可以在我的网站上放置一个更改的图像。我知道如何更改图像元素的来源。我的意思是：图像位于此处 http://mywebsite.com/image.png

这不会改变，但我希望实际图像能够改变。更多例子： https://huggle.jdf2.org/

此网站创建一个包含img username.png

的bbcode元素

[url=http://huggle.jdf2.org/hug/username][img]http://huggle.jdf2.org/sig/username.png[/img][/url]

此图像会根据您拥有的拥抱次数而变化。

我该怎么做？

Answer 1

您可以使用以下命令动态设置图像源网址：

var yourURLHere = 'ADD YOUR URL HERE';
image.src = yourURLHere;

如果您希望图像随机更改，可以使用Math.random（）从数组中选择随机URL。

示例：随机泰迪熊图像（见下文）。

＆＃13;

<image src="#" id="my-image"/>
Click to change image randomly.
<button id="my-btn">Change it!</button>
<script>
var imageURLs = [
  'https://s-media-cache-ak0.pinimg.com/originals/4e/da/9f/4eda9f56de08463bcc18d154f654ab6d.jpg',
  'http://lcdn.inthelighturns.com/media/product/e85/sweet-memories-blue-teddy-bear-urn-b83.jpg',
  'https://s-media-cache-ak0.pinimg.com/originals/3c/80/3c/3c803ce72e8c0325d7ea0fcd32f81ed9.jpg',
  'http://cliparting.com/wp-content/uploads/2016/07/Cartoon-teddy-bear-clipart.gif',
'http://cliparts.co/cliparts/rcn/Kox/rcnKox65i.png',
'https://s-media-cache-ak0.pinimg.com/originals/f2/d6/25/f2d6258ef0fa6de2160778066ccec832.jpg',
'https://s-media-cache-ak0.pinimg.com/236x/90/3a/6c/903a6c59c0a2f42e7d6e7cb9427a8337.jpg',
'https://s-media-cache-ak0.pinimg.com/564x/a9/ee/30/a9ee30a4f8d196a111aa5c3db7b13b6e.jpg',
'http://cdn3.volusion.com/9nxdj.fchy5/v/vspfiles/photos/BB-1433-2.jpg?1415360799'
];
var image = document.getElementById('my-image');
    
function pickRandomURL() {
  return imageURLs[Math.floor(Math.random() * imageURLs.length)];
}
    
 image.src = pickRandomURL();
 image.width = 200;

var btn = document.getElementById('my-btn');
  btn.onclick = function() {
  image.src = pickRandomURL();
  image.width = 200;
};
</script>

＆＃13;

如何更改与之关联的图像

1 个答案: