图片未在 vue.js 和温泉 ui 应用中显示

Question

我使用以下代码在基于 Vue.js 和 Onsen UI 的应用程序中加载图像。但是他们没有出现。

  <div class="footer_logo">
    <ul>
      <li class=""><img :src="logo" alt="logo" /></li>
    </ul>
  </div>

我在脚本中使用以下代码导入了图片

import foot1 from 'static/assets/img/footerlogos/1.svg';
export default {
  data() {
      logo: foot1;
  }

编辑

项目结构

Answer 1

如果 static 文件夹在项目的根目录下，您应该使用一些 root suffix 像这样：

import foot1 from '@static/assets/img/footerlogos/1.svg';

export default {
  data() {
      logo: foot1;
}

参考文献：

Answer 2

添加这样的相对路径：

import foot1 from '../static/assets/img/footerlogos/1.svg';

export default {
  data() {
      logo: foot1;
}

Answer 3

svg image can be a problem first change it than check either it works or not. It it's not working follow the following solution.

您必须将所有图像文件放在 src 文件夹内的 assets 文件夹中，而不是 src/static

Test with this.

create assets directory inside src folder ( make sure it assets not asset or anything else )

add an image ex: logo.jpg

比你的代码

 <div class="footer_logo">
    <ul>
      <li class=""><img :src="logo" alt="logo" /></li>
    </ul>
  </div>

最后更新你的脚本

import foot1 from 'assets/logo.jpg';
export default {
  data() {
      logo: foot1;
  }

Image not showing in vue.js and onsen ui app