Мне интересно, как лучше всего получить путь к активу для таких вещей, как изображения, внутри компонента React.Я использую Laravel, и встроенная функция asset(), которую вы можете использовать в файлах Blade, это именно то, что мне нужно, но она мне нужна на внешнем интерфейсе в 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.
Есть мысли?Спасибо!