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文件夹中创建资产目录（确保资产不是资产或其他任何东西）

添加图片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;
  }

Answer 2

如果static文件夹位于项目的根目录中，则应使用这样的root suffix：

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

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

参考文献：

Answer 3

添加如下相对路径：

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

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