'How can use laravel assets in vue component

i using laravel with vue js
i want to show a image element in vue components but i cant use Laravel blades helpers !

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

its show me Error

So How Can I Use Assets Helper in vue components?

phplaravelvue.jsbalde


Solution 1:[1]

You can take a different approach, more in line with the way you use asset in the blade templates.

Inside the head section of the layout create a global reference to the base asset path, something like this

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

Next step is to create a Vue mixin. In my case, a trans.js file with the following content:

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

Make sure you include it after Vue, for example:

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

and then you can use it inside all your Vue components. Your original code would look like this

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

Note the lack of {{ and the addition of : in this case, since it is used as an attribute value.

Solution 2:[2]

Blade not running on vue component file(.vue files), If you only use just a image path(<img src=" ">) move to images folder to laravel public directory and then you can directly use the image path

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

Otherwise you have to call vue props like this answer

Solution 3:[3]

Add a forward slash to the beginning of your image path. files should be laravel public folder

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 BBog
Solution 2 Udara Chathuranga
Solution 3 Ismael Padilla

Related Questions