Как можно использовать активы Laravel в VUE компоненте

Question

я использую Laravel 5.7 с vue jsя пытаюсь показать элемент изображения в компонентах vue, но я не могу использовать помощников лезвий Laravel!

<img src="{{asset('admin/images/users/avatar-1.jpg')}}" width="35 px" height="23px">

его показать мне Ошибка

Так, как я могу использовать Помощник Активов в vue компонентах?

Answer 1

Blade не работает в файле компонента vue (файлы .vue). Если вы используете только путь к изображению (<img src=" ">), перейдите в папку изображений в общедоступный каталог laravel, а затем вы можете напрямую использовать путь к изображению

<img src="/images/users/avatar-1.jpg" width="35 px" height="23px">

В противном случае вы должны вызвать vue props, например этот ответ

Answer 2

В файле компонента 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'));