如何解决使用“ npm start”和“ npm run deploy”时,React页面有所不同
我正在建立自己的网站,但是在使用npm开始预览网页中的图像时遇到了问题。
使用npm start
在本地预览我的页面时,找不到所有图像和视频,但是当我使用github gh-pages -d build
在线部署时,一切都很好。
如您所见,在本地主机上没有图像:images and videos missing from my page in localhost
但是一旦上网就没有问题:perfectly fine website once online
我使用React构建网站,并使用github-pages在线托管它。 我所有的图像都位于公共文件夹中,并且由于我是前端的入门者,因此我并未尝试任何有趣的编译操作。
任何帮助将是非常有用的,因为无法预览图像是很痛苦的。我找不到任何人遇到同样的问题,而我是前端方面的新手:/ 预先感谢!
解决方法
好吧,我想我用question about public folder and images解决了这个问题。
这个问题来自我,没有明确地说图像来自图像src中的公用文件夹,而react-router-dom似乎不喜欢它。
写作<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"/>
解决了我的问题。
我仍然不知道为什么一旦部署就可以使用它,但是在“ npm start”预览中却无法使用,但是我的问题就解决了!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。