使用 Vue.js 显示图像文件

Question

我是 Vue 的新手，我正在使用 Vue 2.0 做例子，我有这个结构

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

我正在 beging.vue 中进行更改，并且我有这条线

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

问题是，在我进行编译并将其发布到本地服务器的那一刻，图像始终是隐藏的，但在编译之前，我可以很好地看到图像。

重要的是，在我的本地服务器中，我有这个结构

- assets
- dist
 .htaccess
- index.html

理论上，所有信息都存在于 dist 中，并且在 dist 中是正确的：

• 构建.js
• 构建.js.map
• 标志.png

但图像从未出现。 你能帮我理解是什么问题吗？

感谢你。

//更新

存在一个重要的点，因为我使用 apache 是必要的，在我的情况下制作一个 .htaccess 文件我正在使用子文件夹，根据 vue 文档，如果文件将在子文件夹中，那么配置必须是：

<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>

在我的情况下，当我使用浏览器中的检查器代码查看代码时，我拥有的子文件夹是“test”，我可以看到：

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

但是，如果我手动更改并输入：

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

图像出现，但放入htaccess文件的配置是什么？

Answer 1

最好的方法是添加文件加载器。

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

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

Answer 2

使用@符号指向根文件夹

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