[Vuejs]-How to static image show in vue?

by

2👍

 <img style="border:10px solid #000;"  src="/images/principle.jpg" alt="">
👤wangdev87

1👍

The error is because you are defining a string into a vue binding

:src=""

This expects a javascript constant

You could just do

src="/images/test.png"

But this will cause errors as you navigate to sub routes and pages.

In Laravel there is an asset helper and it looks like this

asset('images/test.png')

This will output a full url

http://localhost:8000/images/test.png

This asset helper is useful in PHP. But is not available to JS

So you can make it available using a vue mixin

In the head section of your HTML

Add this

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

This will bind the asset helper to the window

Next create a mixin in your app/js

It will look something like this

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

The final step is to require the mixin

in your app.js

Vue.mixin(require('./asset'));

Then you can use it in vue

<img :src="asset('images/test.png')" />
👤user4796879

Leave a comment