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

Posted 2023-02-22

【中文标题】如何使用 Vue-Loader / Webpack 指向外部（动态）资产

【英文标题】：How to path to external (dynamic) assets with 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 打包图像——我希望它来自用户上传的图像库。任何帮助表示赞赏！

【参考方案1】：

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

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