当前位置：文江博客话题详情

为什么发布到github页面时不会在NextJ中呈现公共/图像？

发布于 2025-02-12 14:52:41 字数 1598 浏览 3 评论 0原文

在IMG SRC中使用绝对路径解决了我的问题，但是引起原始问题的原因未知。

我在下一个路由中添加了自定义前缀，并且我没有使用next/img渲染配置文件照片。我想这就是为什么img src属性不会根据下一个路径前缀配置而变化的原因。

原始问题

我正在创建我的第一个在线投资组合反应，然后发布到github页面。投资组合首页上有一张照片。

当我第一次访问该页面时，照片呈现正确，
但如果导航到其他同一站点页面，然后想通过单击站点徽标再次访问主页，这是返回主页的下一个/链接点。这张照片没有呈现，
使用同一张照片在右下角上有一个浮动按钮，它总是正确地渲染
github repo ：主分支是主动分支
警告：我的代码绝对是可怕的。它可能会伤害您的眼睛...

我的个人资料图片命名为Avatar.png存储在公共文件夹中，

这是代码返回我的个人资料照片的地方

// 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

时附加到URL的附加'/'

，我注意到第一次访问第一次访问： https://yumingchang1991.github.io/personal-portfolio/
same-site导航，然后链接回： https://yumingchang1991.github.io/personal-portfolio

当前，我有一个解决方法是使.js成为独立页面。（尽管我不想这样做...）

原文

Using absolute path in img src solves my problem, but the reason causing original problem is unknown.

I add a custom prefix to NEXT routing, and I didn't use NEXT/IMG to render profile photo. I guess it's the reason why img src attribute doesn't change according to Next path prefix config.

Original Question

I am creating my first online portfolio using Next + React, and then published to github pages. There is one photo in the portfolio homepage.

When I first visit the page, the photo rendered correctly
but if navigate to other same-site pages, and then would like to visit homepage again by clicking site logo, which is a Next/Link point back to home page. The photo is not rendered
there is a floating button on bottom-right corner using the same photo, it always rendered correctly
Github Repo: main branch is the active branch
warning: my code is definitely structured horribly. It might hurt your eyes ...

my profile picture is named Avatar.png stored in public folder

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

first visit: https://yumingchang1991.github.io/personal-portfolio/
same-site navigation then link back: https://yumingchang1991.github.io/personal-portfolio

Currently, I have a workaround is to make about.js to become a standalone page. (although I don't feel like to do so ...)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

贪了杯 2025-02-19 14:52:41

对于遇到类似问题的人：使用绝对路径而不是相对路径将解决此问题。但是，我还没有觉得这个问题首先出现的原因。

更多详细信息：

我在next.config.js

中添加basepath

next.config.js

  const nextConfig = {
     ...
     Basepath：'/hersy-portfolio'
 }

当下一个项目部署到GitHub时，这是img src渲染

  //相对路径

//第一访问
img src ='https://yumingchang1991.github.io/personal-portfolio/profilelarge.png'

//导航到其他页面并卷土重来的后续访问
img src ='https://yumingchang1991.github.io/profilelarge.png'

//随后的访问未正确添加basepath
//因此从相对URL更改为绝对URL解决了问题

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

 const nextConfig={
     ...
     basePath: '/personal-portfolio'
 }

When this Next project deployed to gitHub, this is the img src rendered

// 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

回复收藏 0 原文

~没有更多了~