GitHub Pages 上的 React 应用程序 - URL 缺少存储库名称

Question

I am keeping images in a folder public/assets/img . Then I use it in a component like that:

const imageUrl = "/assets/img/image.png"

Locally everything works fine, but on GitHub Pages in an image URL somehow name of my repo is missing, so instead of

http://name.github.io/my-repo/assets/img/image.png I get http://name.github.io/assets/img/image.png

I was following an instruction on how to create a GitHub Pages build and added in package.json the URL of my project, namely "homepage": "https://name.github.io/my-repo"

-- edit --

Also, I've just now realized, that although the routing seems to work fine, it also misses my repository name in the URL, so instead of

http://name.github.io/my-repo/subpage there is

http://name.github.io/subpage

What am I missing here?

Answer 1

OK, so I somehow have solved my problems, however, I am not quite satisfied with the solutions:

Fixing the URL problem (missing repo name in the URL)

I've added a basename property to my router <BrowserRouter basename="/repo-name">

Downsides: Firstly, it doesn't look good hardcoded. Secondly, npm start opens localhost:3000 which is empty now. I have to add my repo name to open the app locally, so localhost:3000/repo-name - not too neat.

Fixing images problem (also missing repo name in the URL and thus not displaying images)

I've added a process.env.PUBLIC_URL variable to the image URL: const imageUrl = ${process.env.PUBLIC_URL}/assets/img/image.png . In local environment it's empty, deployed it takes homepage value from package.json , which is https://name.github.io/repo-name

Downside: one has to add process.env.PUBLIC_URL before every image displayed in a component.

I would be grateful for any better solution!