如何更改與源相關聯的圖片

是否有無論如何，我可以將圖像放在我的網站上發生變化。我知道如何更改圖像元素的來源。我的意思是這樣的：圖像這裏 http://mywebsite.com/image.png 如何更改與源相關聯的圖片

位於這並沒有改變，但我想實際圖像改變。更多的例子： https://huggle.jdf2.org/

該網站創建一個包含IMG取決於你有多少huggles有username.png

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

該圖像變化的設置高亮元素。

我該怎麼做？

來源

2016-11-27 Alex Hong

你的第一個鏈接看起來有點破。另外，我真的不明白你爲什麼要圖像的src保持不變。 username02.png，username03.png等有什麼問題？ –

因爲如果我要嵌入它說bbcode。我想知道如何做到這一點，以便我可以在不更改參考鏈接的情況下更改圖像。 –

我對bbcode瞭解不多，但是我仍然沒有看到圖像src發生了什麼變化。只需將bbcode更改爲具有新的src。好歹。我不相信有可能做客戶端。您需要使用像php或node.js這樣的服務器端語言來覆蓋服務器上的映像文件。 –

可以動態設置圖像源的URL與：

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

如果你希望你的形象，隨意改變，你可以使用的Math.random（）選擇從數組隨機URL。

例如：隨機泰迪熊圖像（見下文）。

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

來源

2016-11-27 23:40:42

如何更改與源相關聯的圖片

回答

相關問題