如何使用 Vue-Loader / Webpack 指向外部（动态）资产答案

【问题标题】：How to path to external (dynamic) assets with Vue-Loader / Webpack如何使用 Vue-Loader / Webpack 指向外部（动态）资产
【发布时间】：2016-07-05 11:12:35
【问题描述】：

我有一个项目，它通过从 API 服务检索到的 JSON 动态访问个人资料图像。问题是我很难弄清楚在开发过程中将这些图像放在文件系统中的哪个位置以及 JSON 中的路径应该是什么。

这是一个小例子：

<template>
  <li :class="{'is-active': isActive}">
      <div class="responsible">
        <profile-picture :the-url="user.profilePicture" the-size="large"></profile-picture>
        {{ user.name }}
      </div>
  </li>
</template>

<script>
import ProfilePicture from '../components/ProfilePicture'

export default {
  data () {
    return {
      isActive: false
    }
  },
  props: [
    'user'
  ],
  components: {
    'profile-picture': ProfilePicture
  }
}
</script>

那么，user.profilePicture 应该具有的路径是什么，该文件应该位于文件系统中的什么位置？同样，我不想用 webpack 打包图像——我希望它来自用户上传的图像库。任何帮助表示赞赏！

【问题讨论】：

标签： javascript json webpack vue.js

【解决方案1】：

它们可以放在您公开可见的文件夹中的任何位置（其中包含 index.html 的文件夹）。然后，您只需创建相对于该路径的路径，因此如果将它们放在 public/images/users 中，路径将是 /images/users/filename.png。

您也可以让ProfilePicture 组件处理路径，并将文件名存储在您的数据库中。因此数据库将存储filename.png，而您的ProfilePicture 组件将知道将/images/users/ 添加到开头。这样，如果您稍后更改个人资料图片文件夹，则不必更新数据库记录，只需更改 ProfilePicture 组件。这可能是最好的。

【讨论】：