部署反应应用程序后，图像未显示在 gh 页面上

Question

我创建了一个应用程序，其中我提供了社区推荐的图像路径。在本地运行时，它会加载并显示所有图像，但是在我部署到 github 页面后，它没有采用正确的路径来获取图像。我不知道如何解决这个问题，有人可以帮助我吗？

我已尝试添加 %PUBLIC_URL%，但似乎没有任何效果

这是我在本地尝试和工作的。我的图片位于

public/images/login-background.png

 background: url('/images/login-background.jpg') center center
    no-repeat;

当我将我的项目发布到 github 时，url 从 'localhost:3000' 更改为 'https://singhkshitij.github.io/abc/' 所以所有图片都将 url 作为

https://singhkshitij.github.io/images/login-background.png

应该是的

https://singhkshitij.github.io/abc/images/login-background.png

Answer 1

我假设您已经使用create-react-app 来引导您的应用程序。在这种情况下，您需要将package.json 中的homepage 属性指定为类似

  "homepage": "https://singhkshitij.github.io/abc",

参考 - https://facebook.github.io/create-react-app/docs/deployment#building-for-relative-paths

Answer 2

我遇到了同样的问题。基本上你需要改变

 url('/images/login-background.jpg')

到

url('homepagePath/images/login-background/jpg')

homepagePath 是 github 提供的应用程序的 url： https://{username}.github.io/{reponame}