链接到图像不起作用 Sublime 2答案

【问题标题】：Link to Images not working Sublime 2链接到图像不起作用 Sublime 2
【发布时间】：2013-04-24 23:01:35
【问题描述】：

我正在使用 Wordpress 并尝试开发自定义主题。我正在使用 Sublime2 IDE 进行编码。我正在 Chrome 中进行测试。

我很难让图像出现在浏览器中。我对 HTML 并不陌生，似乎无法弄清楚为什么以下代码不起作用...

<img src="images/social/twitter-lg.png" alt="Twitter Icon" title="J2 Design on Twitter">

该文件位于名称为“images”的文件夹中，该文件夹与尝试加载图像的 header.php 位于同一目录中。

如果有人可以帮助我，我将不胜感激。我正在使用 WAMP 进行本地测试。

服务器响应

Connection:Keep-Alive
Content-Length:254
Content-Type:text/html; charset=iso-8859-1
Date:Wed, 24 Apr 2013 23:04:30 GMT
Keep-Alive:timeout=5, max=99
Server:Apache/2.4.2 (Win64) PHP/5.4.3

HTTP/1.1 404 Not Found
Date: Wed, 24 Apr 2013 23:04:30 GMT
Server: Apache/2.4.2 (Win64) PHP/5.4.3
Content-Length: 254
Keep-Alive: timeout=5, max=99
Connection: Keep-Alive
Content-Type: text/html; charset=iso-8859-1

【问题讨论】：

按 F12，点击 Network 标签，按底部的 Images，看看您的请求失败的原因。
@Blender 它给出了 404 未找到错误...没有意义，因为我知道该文件在该文件夹中...
您确定 WAMP 的用户可以访问该文件吗？
不，我不是，有没有办法检查这个？
@Javacadabra：点击图片所在行，滚动到右侧窗格底部，点击Response Headers上的View Source b> 选项卡并发布服务器响应的内容。您确定网址完全正确吗？

标签： php html css wordpress sublimetext2

【解决方案1】：

您使用的是相对 URL。绝对化：

<img src="/wordpress-testing/images/social/twitter-lg.png" alt="Twitter Icon" title="J2 Design on Twitter">

相对 URL 是相对于当前 url，所以如果你在 http://localhost/login 并请求 images/twitter.png，你会得到 http://localhost/login/images/twitter.png。

【讨论】：

其实你的回答确实为我解决了。我必须稍微调整链接才能使其正常工作。这是我的链接：/wordpress-testing/wordpress/wp-content/themes/j2-fed/j2-theme-static-html/images/social/twitter-lg.png

【解决方案2】：

听起来问题出在路径上。 AS Blender 要求，是的，您可以使用绝对路径，但是一旦您上传主题，这当然必须更改。

一种更常见且可能是“最佳实践”的方法是使用 PHP 让您仍然可以使用相对 URL，这些 URL 与您的主题目录相关。

试试这个：

<img src="<?php bloginfo('template_directory'); ?>images/social/twitter-lg.png" alt="Twitter Icon" title="J2 Design on Twitter">

<?php bloginfo('template_directory'); ?> 是 PHP 代码，它使您的相对 url 相对于您的模板目录。如果您的头文件不在模板目录的根目录中，您可能需要更改路径的 HTML 部分，不确定。

希望这会有所帮助。

【讨论】：