简体繁体 English

使用“npm start”和“npm run deploy”时React页面不同

[英]React page is different when using "npm start" and "npm run deploy"

原文 2020-11-04 15:30:25 1 1 reactjs/ image/ github-pages/ npm-start/ npm-publish

I am building my website and I have issues using npm start to preview images in my web-pages.我正在构建我的网站，但在使用 npm start 预览网页中的图像时遇到了问题。

When using npm start to preview locally my page all the images and videos cannot be found but when I deploy online using github gh-pages -d build everything shows just fine.当使用npm start在本地预览我的页面时，找不到所有图像和视频，但是当我使用 github gh-pages -d build在线部署时，一切都显示得很好。 As you can see no images on localhost: images and videos missing from my page in localhost But once online no issues: perfectly fine website once online正如您在本地主机上看不到图像：本地主机中我的页面中缺少图像和视频但是一旦在线就没有问题：一旦在线就完美无缺的网站

I use React to build the website and github-pages to host it online.我使用 React 来构建网站和 github-pages 来在线托管它。 All of my images are located in the public folder and since I am a begginer in front-end I did not try anything funny with my compiling.我的所有图像都位于公共文件夹中，因为我是前端的初学者，所以我没有尝试任何有趣的编译。

Any help would be great because not being able to preview images is quite a pain.任何帮助都会很棒，因为无法预览图像非常痛苦。 I could not find anybody with the same issue and I'm a newbie in front-end stuff :/ Thanks in advance!我找不到任何有同样问题的人，我是前端领域的新手：/提前致谢！

1 个解决方案

Ok I think I solved the issue with this question about public folder and images .好的，我想我解决了这个关于公共文件夹和图像的问题。

The issue came from me not explicitly saying that the images came from the public folder in the image's src and the react-router-dom seemed not to like it.问题来自我没有明确说明图像来自图像 src 中的公共文件夹，而 react-router-dom 似乎不喜欢它。

Writing <img src = {process.env.PUBLIC_URL + "/images/folder/biking.PNG"} alt = "me on a bike"/> instead of <img src = {"images/folder/biking.PNG"} alt = "me on a bike"/> solved my issue.写入<img src = {process.env.PUBLIC_URL + "/images/folder/biking.PNG"} alt = "me on a bike"/>而不是<img src = {"images/folder/biking.PNG"} alt = "me on a bike"/>解决了我的问题。

I still do not know why this works once deployed but not in the "npm start" preview but my problem is solved!我仍然不知道为什么这在部署后有效，但在“npm start”预览中无效，但我的问题已解决！