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