Question

I have a page where the following pattern happens quite often:

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

In order to avoid typos, I'd prefer to only have to enter the image and path once.

Is there a way (preferably using only native HTML/JS/CSS) to avoid that duplication?

Only recent browsers need to be supported.

Edited to add: there's one location in the page that has a similar but possibly conflicting pattern:

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

I could get rid of it if needed. But maybe a more robust solution would be to start from something like:

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

and to replace a predefined pattern with the img tag, rather than the other way around.

Answer 1

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 2

您可以执行此操作。但是请注意，这只会在页面加载后添加img。这意味着可以在页面加载后重新呈现用户视图。您可以通过使用CSS在.img-link类中定义期望的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>

Answer 3

为使我适合您的问题，我只会使用 Vanilla JavaScript 。另外，由于不清楚我是否要从锚点创建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 4

尽管我真的不想鼓励您使用客户端代码来做到这一点，但我至少建议您使用生成链接的代码，而不是生成图像的代码。这样，如果JS不运行，网站仍会显示图像。

最简单的方法是向要自动包装在链接中的所有图像添加一个类，例如“自动链接”，然后运行以下代码：

for (const img of document.querySelectorAll(".auto-link")) {
    const link = document.createElement("a");
    link.href = img.src;
    img.parentElement.replaceChild(link, img);
    link.appendChild(img);
}

您可以将其放在“ domready”或“ load”事件侦听器中，也可以放在页面末尾的脚本标签中。

请注意，几乎所有浏览器在上下文菜单中都有“查看图像”选项，因此没有理由这样做。您不应该引入对JavaScript的依赖，这会降低执行速度，并且在禁用JS或使用屏幕阅读器的情况下将无法工作。相反，此类功能应在服务器端或作为编译步骤完成。

Answer 5

React是封装html并在其他地方重复使用的好方法。

function AImg({ href, src }) {
  return <a href={ href || src }>
    <img src={ src }/>
  </a>;
}

ReactDOM.render(
  <div>
    <AImg src="https://placecage.com/./200/200" />
    <AImg src="https://placecage.com/c/200/200" href="https://placecage.com"/>
    <AImg src="https://placecage.com/g/200/200" />
  </div>, 
  document.getElementById('aimg_container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="aimg_container"></div>

Answer 6

React.js是个好方法。如果只想使用ES6，也可以使用反引号。添加图像的链接和数组中的链接，并在for of循环中创建带有图像的链接。像这样：

const urls = ['1', '2', '3'];
const images = ['a','b','c'];
let links = [];

for (let index of urls.keys()) {
  links.push(`
    <a href="${urls[index]}"><img src="${images[index]}" /></a>
  `);
}

Answer 7

向DOM添加元素可能很昂贵。我不会通过JavaScript添加a标签。基本上保持HTML不变，但要填充的链接的href属性保留为空。

我还为您提供了基于href填充图像源的选项。这不如渲染页面后必须加载图像。

//Wait for everything to be loaded
document.addEventListener("DOMContentLoaded", function(){
  //Find a tags with empty hrefs
  let emptyAs = document.querySelectorAll("a[href='']");
  emptyAs.forEach((a) => {
    //Update href based on image src
    a.href = a.querySelector("img").src;
  });
  
  //Alternatively Find images with empty src
  let emptyImgs = document.querySelectorAll("img[src='']");
  emptyImgs.forEach((img) => {
    img.src = img.parentNode.href;
  });
  
  
});

<a href="">
  <img src="https://fillmurray.com/200/200" />
</a>
<a href="">
  <img src="https://fillmurray.com/100/100" />
</a>

<a href="https://fillmurray.com/300/300">
  <img src="" />
</a>


<a href="http://www.google.com">
  <img src="https://fillmurray.com/400/400" />
</a>

注意forEach对节点列表不支持IE：https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach

自动生成<a> tag from <img/> tag

7 个答案:

确定您的元素：

为图像标签生成锚标签

从锚标记生成图像：