Question

我想知道最好的方法是从React组件内部获取诸如图像之类的资产路径。我正在使用Laravel，您可以在Blade文件中使用的内置asset()函数正是我所需要的，但是我在JS的前端中需要它。好像是Webpack的领土，但我不确定我需要修改什么设置。

当我的路径不仅仅是主机名，例如“ localhost：3000 / myproject / public”，而不仅仅是“ localhost：3000”时，就会出现问题。

做类似...。

import myImage from '../../images/my-image.png'

...

<img src={myImage} />

导致的src路径“ /images/my-image.png”未找到，因为该图像实际上位于“ /myproject/public/images/my-image.png”

过去，我使用了不太优雅的解决方案：

// react.blade.php
<body data-root-url={{ asset('') }}>
  ...
</body>

// helpers.js
export const rootUrl = document.querySelector('body').getAttribute('data-root-url')

虽然这还没有给我带来任何麻烦，但我正在尝试寻找一种更好的方法，并且我最近也开始使用Typescript，并且它（可以理解）对此表示怀疑，因为从技术上讲它可以为空。

我还在webpack.mix.js中尝试了以下方法：

  mix.webpackConfig({
    output: {
      publicPath: 'http://localhost:3000/myproject/public/',
    },
  })

，但这似乎对图像路径没有任何影响。奇怪的是，当遇到类似的代码拆分问题并寻找JS块时，它确实起作用。

有什么想法吗？谢谢！

从React组件中获取Laravel中的资产路径？

0 个答案: