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

Question

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

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

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

我在Chrome Dev Tools中检查了网络，它显示所有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

它们都在一个名为图像的根目录下

我认为 webpack 忽略了您的图像，并且您的图像没有添加到捆绑包中。

从文档中，

我建议您将图像保存在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)$