从<a>标签自动生成<img>标签

Question

我有一个页面，其中经常发生以下模式：

<a href="path/to/image.jpg">
    <img src="path/to/image.jpg">
</a>

为了避免打字，我宁愿只输入一次图像和路径。

有没有办法(最好只使用本地HTML/JS/CSS)来避免这种重复？

只需要支持最近的浏览器。

编辑添加：页面中有一个位置具有类似但可能相互冲突的模式：

<a href="https://a.web.site/">
    <img src="image.jpg">
</a>

如果需要的话我可以把它处理掉。但是，一个更有力的解决方案可能是从以下几个方面着手：

<a href="path/to/image.jpg">
    IMG_LINK_TO_CREATE
</a>

用img标记代替预定义的模式，而不是相反。

Answer 1

为了使我的回答符合你的问题，我只使用Vanilla JavaScript。另外，由于我不清楚您是试图从锚创建img，还是从锚创建img，所以我为您做了这两件事。我会把出现在你问题标题中的那个放在第一位。

确定你的要素：

如果希望这样做有效，则需要至少向锚标记提供一个类或唯一id属性，以便在以后加载到DOM中时正确地修改它们。

生成图像标记的锚标记

在这种情况下，由于您可能要使用多个锚点，并且您需要对每个锚点执行相同的操作，因此带有"create-link“的类属性将足以使您轻松地从DOM中修改这些元素。像这样的东西会有帮助：

<img class="create-link" src="path/to/image.jpg">

这样，您就可以创建一个名为generateImages()的函数，它将完成所有工作。

function generateImages(){
   let images = document.querySelectorAll(".create-link");
   images.forEach(image=>{
      let link = document.createElement('a'),
            parent = image.parentNode,
          childImage = new Image();
      link.href = image.src;
      link.classList.add('generated-link');
      childImage.src = image.src;
      link.append(childImage);
      image.parentNode.removeChild(image);
      parent.append(link);
   });
}

这样就行了。现在，您可以在任何时候或在窗口加载事件中执行它。

window.onload = generateImages;

这里有一个小提琴，以帮助您形象化的整体这一方法。

https://jsfiddle.net/m90b6vc5/1/

从锚标记生成图像：

与另一件事情相同的是，标识您将来需要在JavaScript中使用的元素。代码对此要容易一些，只需从锚标记中检索链接并将其附加到新的图像元素：

function generateImages(){
   let a = document.querySelectorAll(".create-link");
   a.forEach(element=>{
      let image = new Image();
      image.src = element.href;
      element.append(image);
   });
}

https://jsfiddle.net/m90b6vc5

Answer 2

javascript函数

function createImageStructure(number, imageArray){ var structure = "";
    for(var i = 0; i < number; i++){
       structure += '<a href="'+imageArray[i]+'"> <img src="'+imageArray[i]+'"> </a>';
    } console.log(structure); }


var imageArray = [];
imageArray.push("https://pay.google.com/about/static/images/social/knowledge_graph_logo.png");

imageArray.push("https://pay.google.com/about/static/images/social/knowledge_graph_logo.png");

createImageStructure(2, imageArray);

输出

<a href="https://pay.google.com/about/static/images/social/knowledge_graph_logo.png"> <img src="https://pay.google.com/about/static/images/social/knowledge_graph_logo.png"> </a><a href="https://s23527.pcdn.co/wp-content/uploads/2018/05/google-photos.png"> <img src="https://s23527.pcdn.co/wp-content/uploads/2018/05/google-photos.png"> </a>

基本上，创建一个函数，创建一个数组，要有图像路径，这将有助于创建具有多个图像的HTML结构。

如果需要更多的帮助，请让我知道，我会修复这个，如果你只想为所有的img标签一个图像源路径。

Answer 3

你可以做到这一点。但是请注意，这只会在加载页面之后添加img。这意味着用户视图可以在页面加载后重新呈现。您可以在某种程度上通过使用css在. img链接类中定义具有高度或比率的预期img来控制它。

​

$(document).ready(function(){
  $('.img-link').each(function(){
    $(this).append($('<img src="' + $(this).attr('href') + '" />'));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<a href="path/to/image.jpg" class="img-link"></a>
<a href="custom-link">
  <img src="custom-image.jpg" />
</a>
<a href="path/to/image.jpg" class="img-link"></a>

​