Laravel-mix (Reactjs & Laravel) 中组件的未解析图像路径

Question

我将 reactjs 与 Laravel (Laravel-mix) 一起使用。我在 storage/app/public/images/slider-girl.png 中有我的图片并在

上引用了它

 <img src="{require('/images/slider-girl.png')}" />

但不显示图像。

但是，我尝试将图像放入资源和 public 文件夹中，但我得到了相同的响应。我已经尝试了在这里找到的选项，但似乎对我没有任何作用。

<img src={url('storage/app/public/images/slider-girl.png')} />

<img src="{require('/images/slider-girl.png')}" />

我希望显示图像。

Answer 1

转到您的 webpack.mix.js，添加

.setResourceRoot("/");

如下图

mix.react('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   **.setResourceRoot("/");**

那么引用如下：

<img src="/images/slider-girl.png" />

希望对你有帮助

Unresolved image path from the component in Laravel-mix (Reactjs & Laravel)