通过单击图像链接到文件夹中的文件答案

【问题标题】：Linking to a file in a folder by clicking on an image通过单击图像链接到文件夹中的文件
【发布时间】：2014-06-05 19:38:17
【问题描述】：

基本上，我试图链接到 2 个本地文件，这些文件是与正在浏览的网页在同一主机上上传的网页。它应该通过单击这两个图像之一来发生 - Imgur。我究竟做错了什么？我无法单击图像以在新选项卡中打开文件。

这是我的文件夹 - Imgur

这是代码 -

<div class="wrapper">
    <a href="MyIndia/index.html" target="_blank"><img src="images/slide3/MyIndia.png" data-stellar-ratio="1.8" data-stellar-vertical-offset="-200" alt=""></a>
</div>
<div class="wrapper">
    <a href="PizzaCat/index.html" target="_blank"><img src="images/slide3/PizzaCat.png" data-stellar-ratio="1.8" data-stellar-vertical-offset="-35" alt=""></a>
</div>

【问题讨论】：

“MyIndia”和“PizzaCat”文件夹是否都在链接到它们的文件的根目录中？
将我的文件夹图片添加到主帖
我假设上面的代码在 index.html 中？尝试在文件夹名称前添加正斜杠，即“/MyIndia/index.html”和“/PizzaCat/index.html”
@user13286 没有帮助
要打开图片吗？还是索引页？

标签： html image file hyperlink

【解决方案1】：

这是应该工作的代码：

<div class="wrapper">
<a href="PizzaCat/index.html" target="_blank"><img src="images/slide3/MyIndia.png" data-stellar-ratio="1.8" data-stellar-vertical-offset="-200" alt=""></a>
</div>
...

并确保这些细节：

所有在线文件都应可由 Apache（或您使用的任何网络服务器）读取
所有名称和文件夹都区分大小写
看，如果您的文件名中没有任何尾随空格（例如“PizzyCat”，末尾有空格等）
检查您是否真的将所有文件上传到网络服务器

【讨论】：

我知道，但没用，也没用
原来一切都是正确的，但链接的“命中框”非常少，我会努力解决问题

【解决方案2】：

从您发布的代码来看，很可能您的 href 的相对路径有误

运行您的页面，并假设您使用的是现代浏览器，请按 F12 并检查链接元素，以根据您的站点根目录查看路径是否有意义。

【讨论】：

你知道这不是一个答案，事实上它是一个评论。
我不能不同意你们俩，除非这当然是答案，根据 OP 对问题的原始措辞，很可能是。模糊的问题会产生模糊的答案。选择答案后，我很乐意回复。

【解决方案3】：

传递路径如下图：

<a href="C:\Users\Toni Moni\Downloads\fol.html" target="_blank"><img src="images/slide3/PizzaCat.png" data-stellar-ratio="1.8" data-stellar-vertical-offset="-35" alt=""></a>

【讨论】：

但是该文件应该可以从任何 PC 上在线查看，不仅在我在课堂上展示它时。