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

How to path to external (dynamic) assets with Vue-Loader / Webpack

本文关键字：外部 动态 资产 路径 何使用 Vue-Loader Webpack      更新时间：2023-09-26

我有一个项目，可以从从 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组件即可。 这可能是最好的。

相关文章：