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组件即可。这可能是最好的。

如何使用Vue-Loader / Webpack路径到外部（动态）资产

1 个答案: