我有一个页面,其中经常发生以下模式:
<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标签替换预定义的模式,而不是相反。
为了使我的答案适合您的问题,我将只使用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);
});
}
你可以这样做。但请注意,这只会在页面加载后添加img。这意味着可以在页面加载后重新呈现用户视图。您可以通过使用css在.img-link类中定义预期的img with-height或ratio来在一定程度上控制它
$(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>
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标签设置一个图像源路径,我将解决此问题
虽然我真的不想鼓励您使用客户端代码执行此操作,但我至少建议您使用生成链接的代码而不是生成图像的代码。这样,如果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或使用屏幕阅读器,这会降低执行速度并且无法工作。相反,这些功能应该在服务器端完成或作为编译步骤完成。
封装你的html并在其他地方重用它的好方法是React。
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>
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>
`);
}
向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