解决提交README.md到github后，图片无法显示问题

矫情吗；* 2023-07-06 08:56 136阅读 0赞

先来啰嗦几句，不想看的可以直接看教程：

最近自己开发了一个React项目，想要把项目代码上传到github，并在README中详细说明项目的过程，其中就需要插入对于项目的截图。一开始，我只是在README中使用图片的本地地址，然而，README上传后却无法显示图片。分析问题：图片在本地的当然无法显示啦，然后我就在项目目录创了个images目录，将图片存在这里，然后一起提交到github，然后将README中的图片地址改成github中的图片地址，结果还是无法显示。分析问题：上传到github中的图片加密了只能用户登录才能看到，后来到网上找了一些方法，无法解决。然后，就想到了使用[图床][Link 1]，注册个账户后，将图片上传到图床，在图床上将图片地址复制到README中就可以了。

### 详细教程： ###

1、在[图床][Link 1]注册账户（以后写博客使用到本地图片，都可以上传到这里，再使用图片链接，所以建议注册自己账户）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTEwNTM4_size_16_color_FFFFFF_t_70][]

2、登录图床（这网站登录真奇葩，竟然没有登录按钮，后来发现按回车建即可）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTEwNTM4_size_16_color_FFFFFF_t_70 1][]

3、上传图片

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTEwNTM4_size_16_color_FFFFFF_t_70 2][]

注：如果图片比较多，想要分类存储，可以新建相册，分开存储，另外相册还可以加密，保护图片隐私。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTEwNTM4_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTEwNTM4_size_16_color_FFFFFF_t_70 4][]

4、获取图片URL，然后就可以在README或者博客中使用了

方法1）直接右击图片缩略图，复制图片地址（推荐）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTEwNTM4_size_16_color_FFFFFF_t_70 5][]

方法2）点开单独图片，里面包含了该图片在各种平台中使用的链接

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTEwNTM4_size_16_color_FFFFFF_t_70 6][]

**问题：链接在本地README使用时，确实能够显示的，但是将README提交到github时，还是无法显示**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTEwNTM4_size_16_color_FFFFFF_t_70 7][]

**解决方法：**

1、右击无法显示图片，复制图片地址

例：[https://avatars2.githubusercontent.com/u/36882609?s=60&v=4][https_avatars2.githubusercontent.com_u_36882609_s_60_v_4]

2、打开[IPAddress.com][]，查找域名对应的ip，只需要地址当中的一部分

![20200217170707775.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTEwNTM4_size_16_color_FFFFFF_t_70 8][]

3、打开存储在C:\\Windows\\System32\\drivers\\etc的hosts，如果没有权限，使用管理员打开，并按以下格式添加到文件中

199.232.28.133 avatars2.githubusercontent.com

例：

![20200217170856346.png][]

4、保存hosts后，重新刷新github后，便可正常显示了，github上其他无法显示图片的地方按照这些步骤进行就可以了

![20200217171103843.png][]

最后：为了你们少走弯路，所以教程写得还算比较详细了。另外提供图床的网站有很多，我找的这个是免费的，但是图片大小限制在10M以下，不符合你的需求的话可以自行上网找其他的。谢谢你的观看！

[Link 1]: https://imgchr.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTEwNTM4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200217144846568.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTEwNTM4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTEwNTM4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200217145126484.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTEwNTM4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTEwNTM4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200217145324208.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTEwNTM4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTEwNTM4_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200217145346666.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTEwNTM4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTEwNTM4_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200217150120928.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTEwNTM4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTEwNTM4_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200217145738730.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTEwNTM4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTEwNTM4_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200217145955152.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTEwNTM4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTEwNTM4_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200217170227940.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTEwNTM4,size_16,color_FFFFFF,t_70
[https_avatars2.githubusercontent.com_u_36882609_s_60_v_4]: https://avatars2.githubusercontent.com/u/36882609?s=60&v=4
[IPAddress.com]: https://www.ipaddress.com/
[20200217170707775.png]: https://img-blog.csdnimg.cn/20200217170707775.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTEwNTM4_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200217170730256.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTEwNTM4,size_16,color_FFFFFF,t_70
[20200217170856346.png]: https://img-blog.csdnimg.cn/20200217170856346.png
[20200217171103843.png]: https://img-blog.csdnimg.cn/20200217171103843.png