如何使用javascript将相对img src标记更新为绝对路径 [英] How to update relative img src tag to an absolute path using javascript

问题描述

我有一个Web应用程序正在从外部资源中提取RSS提要。从Feed中拉出的一些图像是相对路径，例如 /assets/images/image.jpg 。具有相对路径的图像最终为404，因为它们不会回叫外部资源，因为它是绝对路径，如 externalsource.com/assets/images/image.jpg 。我想编写一个JavaScript函数来收集页面上所有的img src标签，并确保它们都是绝对路径。我没有问题收集所有的img srcs，但不能用绝对网址替换它们。打印出img srcs时，来自拉入资源的资源的网址将应用于该网址。像 resource / assets / images / image.jpg

这是我到目前为止：

  var images = document.getElementsByTagName（'img'）; 
 var srcList = []; （var i = 0; i< images.length; i ++）{
 var pattern = new RegExp（'^ https？：\ / \ / fiddle \.jshell\）的
。净（\/）'）; 
 if（pattern.test（images [i] .src））{
 var sources = images [i] .src; 
 images [i] .src = sources.replace（^ https：：\ / \ / fiddle\.jshell\.net（\ /），http://duo.com ）; 
 console.log（images [i] .src）; 
} else {
 console.log（no match）; 
} 
} 
  

我正在收集所有的srcs，一个正则表达式来查看它是否与资源url相匹配，并用来自外部资源的url替换它。不幸的是，替换url部分不起作用。它需要纯粹的JavaScript和没有jQuery。

任何帮助真的很感谢！

解决方案

看起来您已将字符串传递给 String＃replace 的第一个参数：

  images [i] .src = sources.replace（^ https：：\ / \ / fiddle\.jshell\.net（\ /），http： //duo.com）
  

你可能打算传递一个正则表达式（注意 / 而不是;这代表JS中的正则表达式）：
$ b $

，http://duo.com）

但是，我建议大部分循环和测试逻辑在 forEach 循环中简化为对替换的单个调用，如下所示：

[]。forEach.call .getElementsByTagName（'img'），function（image）{image.src = image.src.replace（/ ^ https？：\ / \ / fiddle\.jshell\.net\ //，'http ：//duo.com/'）console.log（image.src）}）

 < img src =http://fiddle.jshell.net/favicon.ico>  

I have a web application that is pulling in an RSS feed from an external resource. Some of the images being pulled in from the feed are relative paths such as /assets/images/image.jpg. The images with relative paths end up being 404's because they do not call back to the external resource for it to be an absolute path like externalsource.com/assets/images/image.jpg. I want to write a javascript function that collects all of the img src tags on the page and ensures that they are all absolute paths. I have no problem collecting all of the img srcs but cannot replace them with the absolute url. When printing out the img srcs, the url from the resource that is pulling in the feed is applied to the url. Like resource/assets/images/image.jpg

Here is what I have thus far:

var images = document.getElementsByTagName('img');
var srcList = [];
for(var i = 0; i < images.length; i++) {
var pattern = new RegExp('^https?:\/\/fiddle\.jshell\.net(\/)');
if (pattern.test(images[i].src)){
    var sources = images[i].src;
        images[i].src = sources.replace("^https?:\/\/fiddle\.jshell\.net(\/)", "http://duo.com");
   console.log(images[i].src);  
}else{
    console.log("no match");    
}
}

I am collecting all of the srcs, comparing them to a regex to see if it matches the resource url, and replacing it with the url from the external resource. Unfortunately, the replacing the url portion is not working whatsoever. It needs to be pure javascript and no jquery.

Any help is really appreciated!

解决方案

It looks like you passed a string to the first argument of String#replace:

images[i].src = sources.replace("^https?:\/\/fiddle\.jshell\.net(\/)", "http://duo.com")

You probably meant to pass a regular expression (note the use of / rather than "; this represents a regex literal in JS):

images[i].src = sources.replace(/^https?:\/\/fiddle\.jshell\.net(\/)/, "http://duo.com")

However, I would advise that the majority of your looping and testing logic be reduced to a single call to replace within a forEach loop, like so:

[].forEach.call(document.getElementsByTagName('img'), function (image) {
  image.src = image.src.replace(/^https?:\/\/fiddle\.jshell\.net\//, 'http://duo.com/')
  console.log(image.src)
})

<img src="http://fiddle.jshell.net/favicon.ico">

这篇关于如何使用javascript将相对img src标记更新为绝对路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！