如何在Stencil构建的Web Component中插入图片？解决两类报错

咱们一步一步来搞定你遇到的这两个问题：

1. 修复“无法找到模块../assets/logo.svg”错误 #

看你的目录结构，app-header.tsx和assets文件夹是同级的（都在app-header目录下），但你用了../assets/logo.svg，这个路径会往上跳一级，自然找不到目标文件。把导入路径改成相对当前文件的正确路径就行：

import AppLogo from "./assets/logo.svg";

2. 修复“AppLogo已声明但从未使用”错误 #

你在JSX里写的<img src="{AppLogo}" alt="App Name" />是把{AppLogo}当成了普通字符串，而不是引用变量。在JSX中，要使用变量的话，直接去掉引号，只用大括号包裹变量即可：

<img src={AppLogo} alt="App Name" />

额外补充：Stencil静态资源的其他处理方式 #

如果你不想用导入变量的方式，也可以直接用相对路径引用图片，只要确保Stencil的配置文件（stencil.config.ts）里正确包含了静态资源目录。比如：

<img src="./assets/logo.svg" alt="App Name" />

这种方式下，Stencil在构建时会自动处理这些资源，把它们复制到输出目录中。

修改后的完整代码如下：

import { Component } from "@stencil/core";
import AppLogo from "./assets/logo.svg";

@Component({
  tag: "app-header",
  styleUrl: "app-header.scss"
})
export class AppHeader {
  render() {
    return (
      <header class="app-header">
        <a href="#" class="app-logo">
          <img src={AppLogo} alt="App Name" />
        </a>
      </header>
    );
  }
}

这样两个错误应该都能解决啦！

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