Question

我将Laravel 5.7与vue js配合使用
我尝试在vue组件中显示图像元素，但是我不能使用Laravel刀片辅助器！

performance.now()

它向我显示错误

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

Answer 1

您可以采用不同的方法，这与在刀片模板中使用asset的方式更加一致。

在布局的头部部分中，创建对基础资产路径的全局引用，类似这样

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

请注意，在这种情况下，由于缺少{{和:，因为它用作属性值。

Answer 2

vue组件文件的文件结尾为.vue，您不能直接在这些文件中使用Blade东西，您需要执行以下操作：

Vue组件具有所谓的props属性，例如，如果您创建以下组件：

// 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'));

Answer 3

刀片未在vue组件文件（.vue文件）上运行，如果仅使用映像路径（<img src=" ">），则移至images文件夹以创建laravel公共目录，然后可以直接使用映像路径

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

否则，您必须调用this answer之类的Vue道具

Answer 4

在图像路径的开头添加一个正斜杠。文件应该是 laravle 公共文件夹

<img src="/admin/images/users/avatar-1.jpg">

Answer 5

使用以下代码：

0         NaN
1    0.011111
2   -0.065934

对我有用。

如何在Vue组件中使用Laravel资产

5 个答案: