Question

编辑：你可以在这里看到我的意思：Test Page

页面上的图片是非相关的。它们一直工作直到移动到/ test / n /或更深。页面源显示正确链接的图像（非相对，正确的路径），但查看它们，复制它们的URL，并使用内联编辑器检查它们将URL显示为相对并打破它。

例如，假设我使用路径http://url.com/images/image.jpg - 如果我从http://www.url.com/n/x/y/查看它查看源时路径保持不变，但在其他地方，它显示为/images/image.jpg或http://www.url.com/n/x/y/images.jpg

我发现它更令人困惑，因为链接样式表和超链接仍然按预期工作。

我的测试文件夹中有以下.htaccess文件

RewriteEngine on
RewriteBase /test/
#
RewriteCond %{REQUEST_FILENAME} -f
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
#
# Rewrite /test/n/x/y-p/
RewriteRule ^([^/]+)/([^/]+)/([^/]+)-([0-9]+)/$ index.php?n=$1&x=$2&y=$3&p=$4 [L,NC,QSA]
#
# Rewrite /test/n/x/y/
RewriteRule ^([^/]+)/([^/]+)/([^/]*)/$ index.php?n=$1&x=$2&y=$3 [L,NC,QSA]
#
# Rewrite /test/n/x-p/
RewriteRule ^([^/]+)/([^/]+)-([0-9]+)/$ index.php?n=$1&x=$2&p=$3 [L,NC,QSA]
#
# Rewrite /test/n/x/
RewriteRule ^([^/]+)/([^/]*)/$ index.php?n=$1&x=$2 [L,NC,QSA]
#
# Rewrite /test/n-p/
RewriteRule ^([^/]+)-([0-9]+)/$ index.php?n=$1&p=$2 [L,NC,QSA]
#
# Rewrite /test/n/
RewriteRule ^([-_a-zA-Z-]*)/?$ index.php?n=$1 [L,NC,QSA]

Answer 1

似乎有些事情让你认为这是服务器方面的问题。但不，它与Apache无关，也与.htaccess无关，也与mod-rewrite无关。

实际上，问题是由这个JavaScript代码引起的：

function eventSize(){
  if (window.innerWidth < 950)
  {
    document.getElementById('logo').src="template/images/logo_small.png";
  }
  if(window.innerWidth >= 950)
  {
    document.getElementById('logo').src="template/images/logo.png";
  }
}
$(document).ready(eventSize);
$(window).resize(eventSize);

它会将您的网址http://darksociety.org/test/template/images/logo.png替换为template/images/logo_small.png或template/images/logo.png。但是这些新网址并不总是有效。

要解决此问题，您可以删除该代码，修复其网址或使用正则表达式以获得更大的灵活性。

例如：

var img = document.getElementById('logo');
img.src = window.innerWidth < 950
    ? img.src.replace(/^(.+)(\..+)$/, '$1_small$2')
    : img.src.replace(/^(.+)_small(\..+)$/, '$1$2');

如果宽度小于950像素，上面的代码会在扩展点之前添加_small，否则将其删除：

"http://darksociety.org/test/template/images/logo.png".replace(/^(.+)(\..+)$/, '$1_small$2');
    // "http://darksociety.org/test/template/images/logo_small.png"
"http://darksociety.org/test/template/images/logo_small.png".replace(/^(.+)_small(\..+)$/, '$1$2');
    // "http://darksociety.org/test/template/images/logo.png"

这样，即使您在HTML中更改图片的网址，也无需更新JavaScript代码。

从子目录查看时为什么图像会被破坏？

1 个答案: