javascript - 图像路径在反应组件 laravel 项目中不起作用

Question

在我的 react 和 Laravel 项目中，图像没有显示在反应组件中。我的图像在 Laravel 的 public/img 文件夹中，我试图在 resources/js/components/services.js 中访问这些我已经尝试过这些方法

 <img src="./img/front-end.png" alt="icons fron-end" />
<img src="{{asset('/img/front-end.png')}}" alt="icons fron-end" />
<img src={url('./img/front-end.png')} alt="icons fron-end" />
<img src="%PUBLIC_URL%/img/front-end.png" alt="icons fron-end" />
<img src={require('/img/front-end.png')} alt="icons fron-end" />

我也尝试过添加

 .setResourceRoot("/");
in webpack.mix.js and tried
<img src={process.env.PUBLIC_URL + '/img/front-end.png')} alt="icons fron-end" />

但不工作，我应该怎么做才能解决这个问题

Answer 1

资源和公用文件夹在同一个文件夹中，所以从 services.js 到 img 文件夹的路径应该是这样的

./../../../public/img/image.png