如何在 vue 组件中使用 laravel assets

Question

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

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

它告诉我错误

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

Answer 1

vue组件文件后缀为.vue，不能直接在这些文件中使用blade的东西，需要做如下操作：

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

// TestComponent.vue

<template>
    <div>
        <p :users="users"></p>
    </div>
</template>

<script>
    export default {

        props: ['users'],

        data: () => ({
            // ...
        }),
    }
</script>

在这种情况下，您可以将数据传递给 props 属性 users，因此您可以调用 blade 文件中的组件，并将服务器端的用户添加到 props 字段，如下所示：

<test-component :users="{{ $users }}"></test-component>

对于图片，您需要熟悉这一点并添加您的图片来源。

不要忘记在 app.js 文件中初始化组件

Vue.component('test-component', require('./components/TestComponent.vue'));

Answer 2

Blade 不在 vue 组件文件（.vue 文件）上运行，如果你只使用图像路径（<img src=" ">）移动到图像文件夹到 laravel public目录然后就可以直接使用图片路径

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

否则你必须像

这样调用 vue props

Answer 3

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

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

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

下一步是创建 Vue 混合宏。在我的例子中，一个包含以下内容的 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 4

在图片路径的开头添加一个正斜杠。文件应该是 laravel public 文件夹

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

如何在 vue 组件中使用 laravel assets

How can use laravel assets in vue component

php

laravel

vue.js

balde