如何使用Vue-Loader找到外部(动态)资源的路径/ Webpack

Question

我有一个项目，可以动态访问从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打包在一起--我想让这个图片来自用户上传的图片库。如有任何帮助，我们不胜感激！

Answer 1

它们可以转到您的公共可见文件夹(其中包含index.html的文件夹)中的任何位置。然后将路径设置为与之相关的路径，因此如果将它们放在public/images/users中，则路径将为/images/users/filename.png。

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