时间戳

首页 > 解决方案 > 如何在 vue 组件中使用 laravel 资产

php - 如何在 vue 组件中使用 laravel 资产

问题描述

我在 vue js 中使用 laravel
我想在 vue 组件中显示图像元素，但我不能使用 Laravel 刀片助手！

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

它告诉我错误

那么如何在 vue 组件中使用 Assets Helper 呢？

标签： phplaravelvue.jsbalde

解决方案

您可以采用不同的方法，更符合您asset在刀片模板中使用的方式。

在布局的 head 部分中创建对基本资产路径的全局引用，如下所示

<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">

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

推荐阅读