部署React应用后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来引导您的应用程序。在这种情况下，您需要将homepage中的package.json属性指定为

  "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}