图像未显示在 vue.js 和 onsen 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

svg 图像可能是一个问题，首先更改它而不是检查它 工作与否。按照以下解决方案它不起作用。

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

用这个进行测试。

• 在 src 文件夹中创建 assets 目录（确保它不是 assets 或其他任何东西）
• 添加图片，例如：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;
  }

Answer 2

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

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

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

参考资料：

• Babel Plugin Root Import

Answer 3

添加这样的相对路径：

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

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