[英]Why public/image is not rendered in NextJS when published to GitHub Pages?
Using absolute path
in img src
solves my problem, but the reason causing original problem is unknown.在
img src
中使用absolute path
解决了我的问题,但导致原始问题的原因尚不清楚。
I add a custom prefix to NEXT routing, and I didn't use NEXT/IMG
to render profile photo.我为 NEXT 路由添加了一个自定义前缀,并且我没有使用
NEXT/IMG
来渲染个人资料照片。 I guess it's the reason why img src
attribute doesn't change according to Next path prefix config.我想这就是
img src
属性不会根据 Next 路径前缀配置而改变的原因。
Original Question原始问题
I am creating my first online portfolio using Next + React, and then published to github pages.我正在使用 Next + React 创建我的第一个在线作品集,然后发布到 github 页面。 There is one photo in the portfolio homepage.
投资组合主页中有一张照片。
my profile picture is named Avatar.png stored in public folder我的个人资料图片名为 Avatar.png 存储在公共文件夹中
this is where the code is returning my profile photo这是代码返回我的个人资料照片的地方
// components/about.js
<div className={styles['avatar-container']}>
<img className={styles['avatar-img']} src='Avatar.png' width="188px" height="196px" alt="a picture of Yu-Ming"></img>
</div>
// about.js is a react component imported to pages/index.js
I notice that there is additional '/' appended to the end of url when first visit我注意到第一次访问时在 url 末尾附加了额外的“/”
Currently, I have a workaround is to make about.js to become a standalone page.目前,我有一个解决方法是让 about.js 成为一个独立的页面。 (although I don't feel like to do so ...)
(虽然我不想这样做......)
for people who encounter similar problem: use absolute path instead of relative path will solve this problem.对于遇到类似问题的人:使用绝对路径而不是相对路径将解决此问题。 However, I haven't figured the reason why this problem comes up at first place.
但是,我还没有弄清楚这个问题首先出现的原因。
more details:更多细节:
I add basePath in next.config.js
我在
next.config.js
中添加 basePath
next.config.js next.config.js
const nextConfig={ ... basePath: '/personal-portfolio' }
When this Next project deployed to gitHub, this is the img src
rendered当这个 Next 项目部署到 gitHub 时,这是渲染的
img src
// Relative Path // 1st visit img src = 'https://yumingchang1991.github.io/personal-portfolio/ProfileLarge.png' // subsequent visits when navigating to other pages and comeback to root img src = 'https://yumingchang1991.github.io/ProfileLarge.png' // subsequent visit does not add basePath correctly // so changing from Relative URL to Absolute URL fix the problem
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.