使用 Vue.js 显示图像文件

Question

I am new in Vue, i am doing examples using Vue 2.0, i am have this structure

-src
 - assets
    --> logo.png
 - components
    --> beging.vue

i am doing changes in beging.vue and i have this line

<template>
  <div class="container">
     <h1>Página de Inicio</h1>
     <hr>
     <img :src="require('../assets/logo.png')">
   </div>
</template>

The problem is that in the moment i making the compilation and i publish this in my local server the image always is hidden but before to compilate i can see the image fine.

Is important mentionate that in my local server i have this structure

- assets
- dist
 .htaccess
- index.html

in theory all information exist inside to dist and yes is correct in dist exist:

• build.js
• build.js.map
• logo.png

But the imagen never appear. Could you help me to understand what is the problem?

Thank u.

//UPDATE

Exist a important point, as i am using apache is neccesary make a .htaccess file in my case i am working using subfolders, according the vue documentation if the file will be in subfolder thge configuration must be:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /test/
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>

In my case the subfolder that i have is "test" when i review the code usign the inspector code from browser i can see this:

<img src="./src/assets/logo.png?82b9c7a5a3f405032b1db71a25f67021">

But if i change this manually and put this:

  <img src=".test/src/assets/logo.png?82b9c7a5a3f405032b1db71a25f67021">

the image appear, but which is the configuration for put in htaccess file?

Answer 1

the best way is to add File Loader.

         <template>
        <img :src="image"
        </template>
        <script>

        import image from 'relative/path/to/image'
        export default {
        data() {
            return {
            image
            };
        }
        };

Answer 2

Use @ sign to point to root folder

<template>
  <div class="container">
     <h1>Página de Inicio</h1>
     <hr>
     <img :src="require('@/assets/logo.png')">
   </div>
</template>