是否有 css 选项将 html 图像链接到自身？

Question

所以这个：

<html>
    <head>
        <style>
            img{href:self}
        </style>
    </head>
    <img src="./Sampleimage"/>
</html>

基本上是我需要的代码，但由于我不知道如何或什至不知道是否可以这样做，我想，我必须问比我更聪明的人。

我有点不得不这样做，因为我在这个 html 文档中有大约 200 张图片，并且每一张都必须 link 自己。因此，为每张图片添加单独的 <a> 标签并不是很时尚。

Answer 1

扩展 WillardSolutions 的评论...

document.getElementById("myImg").addEventListener("click", function() {
  window.open(this.getAttribute("src"));
});

.clickable {
  cursor: pointer;
}

<img id="myImg" class="clickable" src="https://www.w3schools.com/images/compatible_chrome.gif"/>

打开您的浏览器控制台以查看 URL 的打开被阻止...

如果您希望它在新 window/tab 中打开，请使用：

window.open(this.getAttribute("src"), '_blank');

Answer 2

好主意，但不是，正如上面的评论者所解释的那样。

您可以做的是使用 jQuery 获取每个图像的来源 URL 并将其附加到父 <a> 元素。我会在页面加载时执行此操作，而不是在单击图像时执行此操作，因为这样图像就可以单击了。

我还建议使用图像的缩略图版本，否则页面加载需要很长时间。（如果这样做，您需要将所有缩略图放在一个子目录中，然后使用 replace function 从 link URL 中删除该子目录。

$( document ).ready(function() {
    
  $("img").each(function(){
    var imgUrl = $(this).attr('src');
    $(this).parent().attr('href', imgUrl);
  }); 
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a><img src="https://cdn.pixabay.com/photo/2018/12/15/02/53/flower-3876195_960_720.jpg" width="200"/></a>

Answer 3

不要为这个简单的解决方案使用 JS...

<a href="image-src.ext">
 <img src="image-src.ext"/>
</a>

如果您希望图像可下载，请将 download 属性添加到 <a>。这真的没问题，而且性能更快的解决方案。关于 'stylish'...忘记编码时的时尚 :D

Answer 4

这可能是您正在寻找的解决方案。

这里是fiddle。 https://jsfiddle.net/RadekD/bgfpedxv/1/

HTML

<img class="image" src="https://placeimg.com/100/200/nature" />
<img class="image" src="https://placeimg.com/200/200/nature" />
<img class="image" src="https://placeimg.com/300/200/nature" />

JS

var images = document.querySelectorAll('.image');
    images.forEach(function(element) {
        element.addEventListener("click",function(){
            window.location.assign(element.src);
        });
    });

是否有 css 选项将 html 图像链接到自身？

Is there a css option that links an html image to itself?

html

css

html-head

HTML

JS