时间戳

首页 > 解决方案 > GitHub Pages 存储和渲染图像资产的标准方法

javascript - GitHub Pages 存储和渲染图像资产的标准方法

问题描述

如何将图像存储在我的资产文件夹中并将其呈现在我的导航栏上？
在本地完成时效果很好，但在通过 GitHub Pages 通过网络执行相同操作时会遇到困难。

import * as React from 'react';
import { AppBar, Toolbar, Typography } from '@material-ui/core/';

class NavBar extends React.Component {
  public render() {
    return (
      <div className='navbar'>
        <AppBar position='static' color="inherit" >
          <Toolbar style={{ paddingLeft: '1em', paddingRight: '1em' }}>
            <img className="navbar-logo-favicon" src="../some_logo.png" height="35" width="35" />
            <Typography variant='title' color='default'>
              Project C
            </Typography>
          </Toolbar>
        </AppBar>
      </div>
    )
  }
}

export default NavBar

解决此问题的标准方法是什么？我在谷歌和堆栈溢出上进行了广泛的搜索。大多数解决方案都是路径错误或区分大小写的错误，但似乎并非如此。

标签： javascripttypescriptgithub-pages

解决方案

路径不好

你确实有一条坏路。确保在本地开发时../some_logo.png与公共部署的内容一致

例子

如果您在本地提供public文件夹并且它可以工作（/img/some_logo有效）：

  • 项目
    • 源代码
    • 上市
      • 图像
      • some_logo

在 github 上的页面public应该可以在something.github.io/（所以这/img/some_logo仍然有效）

推荐阅读