如果不在 URL 中使用 www，则图像损坏

Question

我有一个 React 应用程序，我已经开发了一段时间。我今天添加了一个新页面，上面有一些在本地完美运行的图像。我构建包并将其上传到服务器，起初看起来一切都很好。但是，我点击了一个不同的链接到该页面，发现图像没有显示。这两个链接之间的唯一区别是一个是使用 www，另一个不是。

我的图像是这样创建的（与我网站上的所有其他图像相同）

<img style={{ height: 75, width: 75 }} src={"/images/images.jpg"} />

我在 Chrome 开发工具中检查了网络，所有 4 张图片（两个链接）都显示为 200。如果我在损坏的图像图标上单击鼠标右键并选择在新窗口中打开，我会得到相同的结果（适用于 www，不适用）。

我不知道这是否会有所作为，但这是我的 .htaccess 重写：

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
RewriteRule ^index\.html$ - [L]
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
</IfModule>

Answer 1

它们都在一个名为 images 的根目录下的文件夹中

我认为 webpack 忽略了你的图片，并且你的图片没有添加到 bundle 中。

来自docs，

我建议您将图片保存在src 文件夹中。

在src 文件夹中创建一个文件夹images 并将您的图像添加到其中。

--root (folder)
  --public (folder)
  --src (folder)
    --images (folder)
      --images.jpg (image file)
    --components (folder)
      --App.js (file)
    --index.js (file)

现在您可以在App.js 文件中访问您的图片，例如，

import image from '../images/images.jpg';     //You should add correct path to your image from your currect component

<img style={{ height: 75, width: 75 }} src={image} />

这样可以确保在构建项目时，Webpack 会正确地将图片移动到构建文件夹中，并为我们提供正确的路径。

注意：您可以将其添加到您的 .htaccess 文件中，

RewriteCond %{REQUEST_URI} !\.(css|gif|ico|jpg|js|png|swf|txt|svg|woff|ttf|eot)$