您将在项目结构中注意到我们有两个用于资源的目录： /public/ 和 /src/assets/。它们之间有什么区别？一些是静态资源，而另一些则由构建系统处理和嵌入。

所以让我们尝试回答上面的问题。我们将首先讨论使用常规资源，然后我们将看看静态资源的区别。

常规资源 - /src/assets

在 *.vue 组件中，所有模板和 CSS 都由 vue-html-loader 和 css-loader 解析以查找资源 URL。例如，在 <img src="./logo.png"> 和 background: url(./logo.png) 中，"./logo.png" 是一个相对资源路径，将由 Webpack 作为模块依赖项解析。

因为 logo.png 不是 JavaScript，当被视为模块依赖项时，我们需要使用 url-loader 和 file-loader 来处理它。Quasar CLI 已经为您配置了这些 webpack 加载器，因此您基本上可以免费获得诸如文件名指纹和条件 base64 内联之类的功能，同时能够使用相对/模块路径而无需担心部署。

由于这些资源可能在构建期间被内联/复制/重命名，因此它们本质上是您源代码的一部分。这就是为什么建议将 Webpack 处理的资源放在 /src/assets 中，与其他源文件一起。实际上，您甚至不必将它们全部放在 /src/assets 中：您可以根据使用它们的模块/组件对其进行组织。例如，您可以将每个组件放在它自己的目录中，其静态资源就在它旁边。

资源解析规则

相对 URL，例如 ./assets/logo.png 将被解释为模块依赖项。它们将被替换为基于您的 Webpack 输出配置自动生成的 URL。

以 ~ 为前缀的 URL 被视为模块请求，类似于 require('some-module/image.png')。如果您想利用 Webpack 的模块解析配置，则需要使用此前缀。Quasar 提供了 assets Webpack 别名，因此建议您像这样使用它： <img src="~assets/logo.png">。注意‘assets’ 前面的 ~。

静态资源 - /public

根相对 URL（例如 /logo.png - 其中 ‘/’ 是您的 publicPath）或 logo.png 根本不会被处理。这应该放在 public/ 中。这些资源不会被 Webpack 处理。public 文件夹的内容会原样复制到可分发文件夹中。

Quasar 在幕后有一些智能算法，确保无论您构建什么（SPA、PWA、Cordova、Electron），您的静态资源都将被正确引用，仅当且仅当它们不使用相对路径。

<!-- Good! -->
<img src="logo.png">

<!--
  BAD! Works until you change vue router
  mode (hash/history) or your public path.
  Don't!
-->
<img src="/logo.png">

Vue 绑定仅需要静态资源

请注意，无论何时您将“src”绑定到 Vue 范围内的变量，它都必须来自 public 文件夹。原因很简单：URL 是动态的，因此 Webpack（在编译时打包资源）不知道您将在运行时引用哪个文件，因此它不会处理 URL。

<template>
  <!-- imageSrc MUST reference a file from /public -->
  <img :src="imageSrc">
</template>

<script>
export default {
  setup () {
    return {
      /*
        Referencing /public.
        Notice string doesn't start with a slash. (/)
      */
      imageSrc: 'logo.png'
    }
  }
}
</script>

您可以通过将 src 绑定到 Vue 的值来强制提供静态资源。不要使用 src="path/to/image"，而应该使用 :src=" 'path/to/image' " 或 :src="imageSrc"。请注意第二个代码示例中双引号内的单引号的使用（为了在文档网站上直观地显示，已添加空格 - 正常情况下您不会有空格）。

在 JavaScript 中获取资源路径

为了让 Webpack 返回正确的资源路径，您需要使用 require('./relative/path/to/file.jpg')，它将由 file-loader 处理并返回解析后的 URL。例如

computed: {
  background () {
    return require('./bgs/' + this.id + '.jpg')
  }
}

请注意，上面的示例将包含 ./bgs/ 下的所有图像，以供最终构建使用。这是因为 Webpack 无法猜测运行时将使用哪些图像，因此它将所有图像都包含进来。