What is best practice for image src in vue SFC?

Question

I am using Laravel 5.8 and Vue 2.6 and trying to use a relative path for an image file in my single file component. I have reviewed the suggestions in How to import and use image in a Vue single file component? but cannot get it to work.

When trying:

<template>
  <div id="app">
    <img src="./assets/logo.png">
  </div>
</template>

<script>
export default {
}
</script>

<style lang="scss">
</style> 

I get this:

This relative module was not found: * ./assets/logo.png in ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib? ?vue-loader-options!./resources/js/components/xxxx.vue?vue&type=template&id=abd0e146&scoped=true&

When I try:

<template>
  <div id="app">
    <img :src="image" />
  </div>
</template>

<script>
import image from "./assets/logo.png"


export default {
    data: function () {
        return {
            image: image
        }
    }
}
</script>

<style lang="scss">
</style> 

I get:

This relative module was not found: * ./assets/logo.png in ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js /components/xxxx.vue?vue&type=script&lang=js&

Am I missing something with webpack-mix or vue-loader?

Edit:

Using simple static reference (src="/assets/logo.png") works on local development server, but doesn't on production server.

I've seen numerous suggested solutions for this basic image file referencing, but puzzled that there are so many possibilities and not a single best practice. Again, hoping to find a Best Practice when using Laravel/Laravel Mix/Vue and SFC that works in development and production.

Answer 1

There are 2 ways of using an image in your setup:

Bundled with webpack

<img src="./assets/logo.png">

import image from "./assets/logo.png" 

These bundle the image using webpack, and using this solution you get the benefits of:

• Automatic inlinening with base64 for small images
• Automatic "deep" compressing with any webpack loaders
• Path works from every path in your app
• Compile time checking if the file exists

Using your own webserver

const image = '/assets/logo.png'

const image = 'http://example.com/’

In these solutions, you need to setup your webserver yourself to serve those resources (or put them in the public directory)

• Easy changing to a different image without rebuilding the front end
• More flexible

Answer 2

The answer to this is that the wrong deployment for the production server was being used that tried pointing to the 'public' folder instead of locating the public files on public_html.

After deploying according to this post, of course relative paths work exactly the same on development and production servers.

The only difference is in Step 5 for Laravel 5.8 in the server.php file,

Change

if ($uri !== '/' && file_exists(__DIR__.'/public'.$uri)) {
    return false;
}

To

if ($uri !== '/' && file_exists(__DIR__.'/public_html'.$uri)) {
    return false;
}

Relative paths like

<img src="img/logo.png">

on either server work the same.

It's unfortunate that Laravel docs don't go into more detail on this method of deployment since I suspect there are numerous developers wanting to deploy on shared servers at least for testing purposes.

Answer 3

Use

<img src="@/assets/logo.png">

This will use webpack and created a hashed version of your logo.png. Or in JS use:

:src="require('@/assets/logo.png');

Answer 4

Provided that your image is stored in public folder and is accessible, you can link to it by absolute path just fine instead of using a relative path ./

<template>
    <div id="app">
        <img src="/public/img/widgets/logo.png" />
    </div>
</template>

<script>
export default {};
</script>

<style lang="scss">
</style>

Given you have this structure

Hope this helps