文章/答案/技术大牛

发布

社区首页 >问答首页 >将app部署到GitHub页面中的子文件夹时出现的相对路径问题

问将app部署到GitHub页面中的子文件夹时出现的相对路径问题
EN

Stack Overflow用户

提问于 2018-11-09 21:49:59

回答 1查看 1.7K关注 0票数 1

我有一个反应应用程序与这个项目的结构：

在我的主组件和关于组件中，我有两个将src设置为：<img src="/img/charlie1.jpg" alt="charlie home pic" />和<img src="/img/charlie2.jpg" alt="charlie about pic" />的映像

因此，我假设它将开始查找根文件夹，然后图像文件夹，然后在那里找到图片。

当我在我的本地机器上开发时，这个功能很好，图像将正确显示。

但是，当我构建它并移动文件以刺激图像时，它将在以下路径查找图像：https://xyz.github.io/img/charlie2.jpg而不是https://xyz.github.io/charlieReact/img/charlie2.jpg

我怎样才能解决这个问题？

如果我将图像src更改为：<img src="./img/charlie1.jpg" alt="charlie home pic" />

然后它在github页面中工作，但是当我在本地机器…上时，图像将不会显示

reactjs

回答 1

Stack Overflow用户

发布于 2018-11-09 21:53:08

将图像导入JavaScript并在可能的时候使用导入的变量是个好主意，URL只会自己工作。

import charlie1 from './charlie1.jpg';

<img src={charlie1} />

如果您的页面有/以外的根目录，并且在public目录中有资产，那么您很可能必须执行代码中的一些额外逻辑。

package.json

{
  "homepage": "https://xyz.github.io/charlieReact"
}

App.js

<img src={`${process.env.PUBLIC_URL}/img/charlie1.jpg`} />

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53233668

复制

相似问题

问将app部署到GitHub页面中的子文件夹时出现的相对路径问题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将app部署到GitHub页面中的子文件夹时出现的相对路径问题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将app部署到GitHub页面中的子文件夹时出现的相对路径问题
EN