时间戳

首页 > 解决方案 > Show images files using Vue.js

vue.js - Show images files using Vue.js

问题描述

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:

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?

标签： vue.jsvuejs2

解决方案

使用@符号指向根文件夹

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

推荐阅读