JavaScript用External src替換img src
[英]JavaScript replace img src with External src
問題描述
我有一個奇怪的問題，我無法弄清楚。
我的網頁上圖像正常
<img src="images/logo.png"/> <!-- getting image from root directory -->
而且我有一些JavaScript代碼來替換圖片來源
function imageUpdate() {
var image = document.querySelectorAll("img");
for (var num = 0; num < image.length; image++)
image[num].src = image[num].src.replace("images/pic01.png", "images/other/pic02.png")
}
這段代碼可以正常工作，雖然它似乎在我希望將其替換為src的根目錄（例如“ http://www.servername.com/pic03.png ”）之外就立即掉下來，但效果很好，但//是一個虛構的URL，請不要嘗試點擊它）。
是否有發生這種情況的原因？ 有沒有解決的辦法？
4 個解決方案
解決方案1
1 2014-03-28 07:42:12
問題是您只替換了原始src的最后一部分。 img標簽的src首先看起來像這樣：
“ http://yourserver.com/images/pic01.png ”
...並用您的外部網址替換“ images / pic01.png”后，看起來像這樣：
為避免此問題，您可以嘗試以下操作：
function imageUpdate() {
var image = document.querySelectorAll("img");
for (var num = 0; num < image.length; num++) {
if (stringEndsWith(image[num].src, "images/pic01.png")) {
image[num].src = "http://www.oecd.org/media/oecdorg/directorates/developmentcentre/Facebook-logo-34x34.png";
}
}
}
function stringEndsWith(string, suffix) {
return string.indexOf(suffix, string.length - suffix.length) !== -1
}
for循環中還有一個錯誤，您正在遞增圖像而不是num
分步說明
imageUpdate（）
遍歷每個img標記並查看src屬性
如果src以“ images / pic01.png”結尾，請用新的url替換所有src
stringEndsWith（）
查找給定后綴的索引（開始在后綴可以位於的最后可能位置查找后綴）
如果找到此索引（不同於-1），則返回true，否則返回false
解決方案2
0 2014-03-28 06:55:07
您要分配給哪個目標網址？ 確保它指向絕對地址（在開頭保留http：//部分）。
如果文件在同一服務器上，您仍然可以使用相對文件路徑，並通過使用兩個點將其轉到父文件夾。 例如：../ someotherfolder / pic03.jpg
解決方案3
0 2014-03-28 07:02:32
<script>
function imageUpdate() {
document.getElementById('imageT').src = 'test.jpg';
}
</script>
<img id='imageT' src="images/logo.png"/> <!-- getting image from root directory -->
解決方案4
0 2014-03-28 07:29:17
您嘗試使用的鏈接中有錯誤。 實際鏈接應為：
http://www.oecd.org/media/oecdorg/directorates/developmentcentre/Facebook-logo-34x34.png
以下是代碼來演示：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script>
function changeImage() {
document.getElementById('changeThis').src = 'http://www.oecd.org/media/oecdorg/directorates/developmentcentre/Facebook-logo-34x34.png'
}
</script>
</head>
<body>
<img id="changeThis" src="http://www.wartburgseminary.edu/uploadedImages/Resources/small-twitter-icon.jpg">
<input type="button" value="Change" onClick="changeImage()">
</body>
</html>
javascript正則表達式將所有img src替換為data-src
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.