Quasar/Vue.js头部图片无法显示问题求助

问题根源 #

你遇到的404错误是因为public文件夹是项目的静态资源根目录，引用其中的文件时无需在路径里添加public/前缀，Quasar会自动从根目录寻址静态资源。另外若将图片放在src/assets，需采用webpack的资源引用规则，因为该目录下的文件会被webpack打包处理。

可行解决方案 #

方案一：基于public文件夹的配置 #

修改q-img的src路径，移除public/前缀：

<q-img src="/icons/favicon-16x16.png" style="width: 70px;"></q-img>

确认图片确实存放在项目根目录的public/icons/文件夹下，重启开发服务后即可正常显示。

方案二：基于src/assets文件夹的配置 #

将图片放入src/assets目录（例如src/assets/logo.png），通过以下两种方式引用：

<!-- 方式1：使用require动态引入 -->
<q-img :src="require('@/assets/logo.png')" style="width: 70px;"></q-img>

<!-- 方式2：导入后直接绑定 -->
<script setup>
import logo from '@/assets/logo.png'
</script>

<template>
  <q-img :src="logo" style="width: 70px;"></q-img>
</template>

这种方式下webpack会对图片进行压缩优化，适合需要打包处理的资源文件。

额外注意事项 #

• 不要混淆两种路径规则：public下的资源用根路径（以/开头），assets下的资源用模块路径（借助@/或require）。
• 修改静态资源路径后，建议重启开发服务，避免缓存导致的路径识别异常。

内容的提问来源于stack exchange，提问作者señor.woofers