如何在JavaScript中更改图像的路径名
How can I change the pathname of a image in JavaScript?
searchURL: function() {
function insertAfter(newNode, referenceNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
var link, url, parser, newPathName = '',
emailUrl = /'/img'//,
newstr = '',
doc = document,
container,
container_id,
container_links,
container_images,
documentTableWrapper,
docBodyFirstChild,
nodeToTargetToInsertLP;
if (!doc.getElementById('container')) {
container = doc.createElement('div');
container.setAttribute('id', 'container');
container.className = 'container-avon-representative-news';
container_links = container.getElementsByTagName('a');
container_id = doc.getElementById('container');
docBodyFirstChild = doc.body.firstChild;
nodeToTargetToInsertLP = doc.getElementsByClassName('flexTile')[4];
if (nodeToTargetToInsertLP) {
documentTableWrapper = doc.getElementsByClassName('marginfix')[0];
container.appendChild(documentTableWrapper);
insertAfter(container, nodeToTargetToInsertLP);
} else {
documentTableWrapper = doc.getElementsByTagName('table')[0];
container.appendChild(documentTableWrapper);
doc.body.insertBefore(container, docBodyFirstChild);
}
} else {
container_links = doc.getElementById('container').getElementsByTagName('a');
}
container_images = container.getElementsByTagName('img');
for (var i = 0; i < container_images.length; i++) {
if (arguments[0] == "smo" || arguments[1] == "smodev") {
container_images[i].src = container_images[i].src.replace(emailUrl, '/images/dir_a/');
} else {
container_images[i].src = container_images[i].src.replace(emailUrl, '/static/images/dir_b/');
}
}
for (var i = 0, len = arguments.length; i < len; i++) {
url = getURL(arguments[i]);
for (var j = 0, jlen = container_links.length; j < jlen; j++) {
link = container_links[j];
if (link.href.indexOf(url) !== -1) {
parser = document.createElement('a');
parser.href = link.href;
link.setAttribute('target', '_self');
newPathName = parser.pathname;
if (newPathName.search(/Executive|District|Division|National/) != -1) {
newPathName = newPathName.split('/').pop();
newstr = newPathName;
} else {
newstr = newPathName;
}
link.href = newstr;
} else {
link.setAttribute('target', '_blank');
}
}
}
},
我有一个循环,它正在遍历div的子图像:
var container_images = container.getElementsByTagName('img'),
emailUrl = /'/img'//;
for (var i = 0; i < container_images.length; i++) {
if (arguments[0] == "smo" || arguments[1] == "smodev") {
container_images[i].src = container_images[i].src.replace(emailUrl, '/images/dir_a/');
} else {
container_images[i].src = container_images[i].src.replace(emailUrl, '/static/images/dir_b/');
}
}
奇怪的是,这在一个实例(服务器的另一个区域(中起作用,但在另一个实例中,它添加了其他路径名/目录,我甚至没有指出?!
我认为replace
足够明确:
xxx.src.replace(emailUrl, '/images/dir_a/');
如果此image
标记的源属性设置为/'/img'//
,则将其替换为/images/dir_a/
有人知道一个更明确的方法,不会添加我没有分配的目录吗?
有人能解释一下replace
方法是如何发生这种情况的吗?
更新为了提供一些背景,我没有任何问题的环境如下:我的公司使用CMS来提供这些页面。文件扩展名称为.page
;我从来没有听说过CMS之外的扩展,所以我认为它是CMS专有的。
无论如何,在CMS中,您也可以像从任何其他服务器上一样服务器html
文件。但是在这个例子中,当我在dev工具中检查源代码时,它似乎添加了<img src="http://xxx.xxx.com/REPSuite/static/html/inews_archives/static/images/dir_b/xxx.png">
而不是<img src="http://xxx.xxx.com/REPSuite/static/images/dir_b/xxx.png">
问题是您正在使用.src
,并且希望使用.getAttribute('src')
和.setAttribute('src', 'your new src')
。
HTMLImageElement.src
是反映src HTML的DOMString属性,包含图像的完整URL,包括基本URI。
所以当你调用.src
时,它会给你完整的绝对电流uri。您只想获取/设置src属性。工作示例jsbin
答案很简单(当然是事后(。不管怎样,因为我在提供页面的另一个环境中只得到了的时髦路径,所以我只是做了一个条件,检查这个时髦路径。
因此,我没有检查一个正则表达式,而是检查了两个正则表达式。
var emailUrl = /img'//gi,
tsUrl = /'/REPSuite'/static'/html'/inews_archives'/img'//gi;
for (var i = 0; i < avon_rep_container_images.length; i++) {
if (arguments[0] == "smo" || arguments[1] == "smodev") { // Checks what environment the page will be used in so we can change the src attribute of all the images in the document to the appropriate path
avon_rep_container_images[i].src = avon_rep_container_images[i].src.replace(emailUrl, '/images/avon_manager_news/');
} else if(!nodeToTargetToInsertLP) {
avon_rep_container_images[i].src = avon_rep_container_images[i].src.replace(tsUrl, '/REPSuite/static/images/rep_news/');
} else {
avon_rep_container_images[i].src = avon_rep_container_images[i].src.replace(emailUrl, '/static/images/rep_news/');
}
}
感谢所有帮助我的人,我很感激!
- 如何使用url加载程序在webpack中导入多个图像
- nodejs-expressjs上传图像并显示它们
- 使用JSP从服务器检索和显示图像
- 角度:在ng重复上切换图像
- 画廊图像未显示
- Phonegap-(安卓/iphone)多个图像的图像库出现问题
- Javascript排序的图像弹出窗口..可以't单独弹出
- 画布数据到图像
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- 使图像在单击时展开到不大于浏览器
- Html页面上的多个Base64图像和平滑加载
- UIAutomation放大图像
- 使用javascript在Flash中加载外部图像
- 可以在这里为背景图像设置滤镜吗
- 当图像转换为本地存储的DataURL时,EXIF被删除
- 使用 js 将背景图像设置为 HTML
- Javascript将图像src更改为淡入淡出
- 无法在本地计算机中将画布另存为图像
- 使用文件夹路径名保存所有图像文件和文件名
- 如何在JavaScript中更改图像的路径名