使用Vue.js显示图像文件

Question

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

-src
- assets
--> logo.png
- components
--> 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 exist中yes是正确的:

• build.js
• build.js.map
• logo.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

最好的方法是添加File Loader.

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