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