javascript - 如何使用Vue-Loader/Webpack转到外部(动态) Assets

我有一个项目，该项目通过从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打包在一起-我希望它来自用户上传的图像库。任何帮助表示赞赏！

最佳答案

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

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

关于javascript - 如何使用Vue-Loader/Webpack转到外部(动态) Assets ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36088774/