如何在Vue子组件中添加图标？img标签与背景图均失效

先看你代码里的明显错误：样式标签写成了<styles>，正确应该是<style>，多一个s会导致样式块完全不被Vue解析，背景图自然不会生效。

接下来针对两种图标展示方式，给你稳定的解决方案：

1. img标签展示图标 #

直接用Vue项目默认的@别名（指向src目录），避免相对路径层级混乱：

<div>
  <a href="#" class="icon">
    <img src="@/assets/icons/icon.svg" alt="图标" />
  </a>
</div>

如果需要动态切换图标，也可以用require动态导入：

<div>
  <a href="#" class="icon">
    <img :src="require('../assets/icons/icon.svg')" alt="图标" />
  </a>
</div>

2. CSS背景图展示图标 #

首先修复样式标签，然后用~@引用资源（~告诉webpack这是模块路径，@指向src），同时必须给容器设置宽高，否则元素高度为0看不到背景图：

<style>
.icon {
    background: url(~@/assets/icons/icon.svg) center center no-repeat;
    width: 24px;
    height: 24px;
    display: inline-block; /* 确保a标签能撑起宽高 */
}
</style>

常见踩坑点 #

• 样式标签语法错误：必须是<style>，不能多写s
• 背景图容器没设宽高：元素默认高度为0，背景图无法显示
• 相对路径层级错误：嵌套组件的相对路径容易出错，用@别名更可靠
• 静态资源未被webpack解析：用@或require确保资源被正确打包到输出目录

内容的提问来源于stack exchange，提问作者user21728832