“Failed to load resource” error when loading photos on GitHub Pages with ReactJS.

huangapple go评论63阅读模式
英文:

"Failed to load resource" error when loading photos on github pages with reactjs

问题

我最近在 GitHub Pages 上部署了一个 React 网站,但我的照片一直无法加载。我不确定问题是什么。

GitHub Pages 网站:https://connoryoung2.github.io/photo-gallery/
GitHub 存储库:https://github.com/connoryoung2/photo-gallery

我尝试过更改照片的目录(例如,从 ./photos/photo.png 改为 ../photos/photo.png),并确保每个链接到照片的链接都拼写正确。也许我做错了什么。

英文:

I recently deployed a react website on github pages but my photos keep failing to load. I'm not sure what the problem is

github pages website: https://connoryoung2.github.io/photo-gallery/
github repo: https://github.com/connoryoung2/photo-gallery

I have tried changing the directory of the photos (ie. ./photos/photo.png to ../photos/photo.png) and making sure that each link to each photo is capatilized correctly. Maybe I'm doing this wrong though.

答案1

得分: 1

Sure, here's the translated content:

像这样写

<img src="/photo-gallery/photos/stel_curt.jpg" alt="Gallery Image" class="home-img img-fade active">

(只适用于捆绑工具)您还可以在组件中导入照片并插入img src,然后您的路径将正常。

import photo from './photos/lmK8L8nRkqk.jpg';

export default function App() {
  return <img src={photo} alt="" />;
}
英文:

write like this

&lt;img src=&quot;/photo-gallery/photos/stel_curt.jpg&quot; alt=&quot;Gallery Image&quot; class=&quot;home-img img-fade active&quot;&gt;

(it works only with bundlers) you can also import photo in component and insert in img src and then your paths will be alright

import photo from &#39;./photos/lmK8L8nRkqk.jpg&#39;;

export default function App() {
  return &lt;img src={photo} alt=&quot;&quot; /&gt;;
}

</details>



huangapple
  • 本文由 发表于 2023年6月8日 05:28:13
  • 转载请务必保留本文链接:https://go.coder-hub.com/76427223.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定