Question

这是我的代码，它尽可能具有魅力：

        <li class="icon-list">
          <img src="../assets/apple.svg" alt="apple" class="icons">
        </li>        
        <li class="icon-list">
          <img src="../assets/google.svg" alt="google" class="icons">
        </li>

我想在上面做动态循环。所以我使用v-for并使用:src和:alt。

    <li v-for="icon in icons" class="icon-list">
      <img class="icons" :src="'../assets/' + icon.src" :alt="icon.alt">
    </li>


export default {
  name: "Home",

  data() {
    return {
      icons: [
        {          
          src: "google.svg",
          alt: "google"
        },
        {          
          src: "apple.svg",
          alt: "apple"
        }
      ]
    };
  }
};

但是，它不会加载任何图像。有什么建议吗？

Answer 1

据我所知，您试图实现的目标不可能像您想象的那样。 Vue模板只能在运行时访问关联的组件模型的属性。但是，Webpack会在编译时首先捆绑所有资源，包括图像。

绑定:src="'../assets/' + icon.src"时，应用程序将尝试相对于浏览器的url上下文找到它，具体取决于放置文件的位置和所使用的服务器可以在任何地方。

您可以做的是使用webpack导入文件，这将为您提供图像的base64表示并将其绑定到源，如下所示：

import Logo from '@/assets/logo.png'

export default {
  name: "App",
  data() {
    return {
      sources: [Logo]
    }
  }
};

然后像这样绑定它：

<img v-for="(source, index) in sources" :key="index" width="25%" :src="source">

我做了an example，以防万一。注意：对于大文件来说，这可能不是一个很好的解决方案。

VueJs-加载动态图像

1 个答案: