react脚手架在组件中引入public下的图片不能显示的解决方法

一、问题的产生

1.1、今天使用react脚手架写项目时,遇到了这样一个问题:
我在组件中引入public下的图片,但是不能显示,我的路径按照提示写的,肯定没问题啊。

   <img src='../../../public/icons/tabs_false/未选中-首页.png' alt="首页" /></div>

二、解决过程

2.1、不能显示肯定是路径的问题,我首先想到的是使用 %PUBLIC_URL% 指引public目录

 <img src='%PUBLIC_URL%/icons/tabs_false/未选中-首页.png' alt="首页" /></div>

结果:不能解决,还是不能显示
2.2、我突然想到,这个组件不是要插如App组件中吗?那么路径是不是要写App与图片的路径呢?

  <img src='../public/icons/tabs_false/未选中-首页.png' alt="首页" /></div>

结果:不能解决,还是不能显示

三、解决方法

3.1、我开始懵圈了,最后我在网上找到了解决方法:就是静态资源会默认以public路径开头,只需要写后面的路径就可以了

  <img src='/icons/tabs_false/未选中-首页.png' alt="首页" /></div>

猜你喜欢

转载自blog.csdn.net/m0_63135041/article/details/130439018
今日推荐