php - 如何在 vue 组件中使用 Laravel Assets

Question

我在 vue js 中使用 laravel
我尝试在 vue 组件中显示一个图像元素，但我不能使用 Laravel Blade 助手!

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

它给我看错误
那么如何在 vue 组件中使用 Assets Helper 呢？

Answer 1

你可以换一种方式，更符合你的使用方式asset在 Blade 模板中。

在布局的 head 部分创建一个对基础 Assets 路径的全局引用，像这样

<script>
window._asset = '{{ asset('') }}';
</script>

下一步是创建一个 Vue mixin。就我而言，一个 trans.js包含以下内容的文件:

module.exports = {
    methods: {
        asset(path) {
            var base_path = window._asset || '';
            return base_path + path;
        }
    }
}

确保在 Vue 之后包含它，例如:

window.Vue = require('vue');
Vue.mixin(require('./asset'));

然后你可以在你所有的 Vue 组件中使用它。您的原始代码如下所示

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

注意缺少 {{并添加 :在这种情况下，因为它被用作属性值。