Как можно использовать активы Laravel в VUE компоненте
я использую Laravel 5.7 с vue js
я пытаюсь показать элемент изображения в компонентах vue, но не могу использовать помощников лезвий Laravel!
<img src="{{asset('admin/images/users/avatar-1.jpg')}}" width="35 px" height="23px">
его покажи мне ошибку
Итак, как я могу использовать Assets Helper в компонентах vue?
Решение
Файл компонента vue имеет окончание файла .vue, вы не можете использовать блейд-файлы непосредственно в этих файлах, вам нужно сделать следующее:
У компонента Vue есть так называемые свойства реквизита, например, если вы создаете следующий компонент:
// TestComponent.vue
<template>
<div>
<p :users="users"></p>
</div>
</template>
<script>
export default {
props: ['users'],
data: () => ({
// ...
}),
}
</script>
В этом случае вы можете передавать данные атрибутам props пользователям, поэтому вы можете вызвать компонент в своем блейд-файле и добавить своих пользователей со стороны сервера в поле props следующим образом:
<test-component :users="{{ $users }}"></test-component>
Для изображений вы должны принять это и добавить свой источник изображения.
Не забудьте инициализировать компонент в вашем файле app.js
Vue.component('test-component', require('./components/TestComponent.vue'));
Другие решения
Blade не работает с файлом компонента vue (файлы .vue), если вы используете только путь к изображению (<img src=" ">) перейдите в папку с изображениями в общедоступный каталог laravel, а затем вы можете напрямую использовать путь к изображению
<img src="/images/users/avatar-1.jpg" width="35 px" height="23px">
В противном случае вы должны назвать Vue реквизит, как этот ответ