如何将图像插入 Web 组件？

Question

我正在尝试将图像插入到使用 Stencil 构建的 Web 组件中。

我收到 2 个错误：

AppLogo is declared but its value is never read.

和

Cannot find module ../assets/logo.svg.

目录：

- src
-- components
--- app-header
---- assets
----- logo.svg
---- app-header.tsx
---- app-header.scss
---- app-header.spec.ts

代码：

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>
    );
  }
}

这方面的文档并不多（我可以找到）。因此，任何帮助表示赞赏。

Answer 1

这里出了很多问题。

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

您不能只将 .svg 文件导入 Javascript。当您像这样导入 AppLogo 时，您期望它包含什么？ 通常，当您以这种方式导入 .js、.jsx 或 .tsx 文件时，在这些文件的某处会指定 export。所以你知道当你从那个文件中import 时，你会得到你导出的任何东西。 不过.svg 中没有export。

你的用法也是错误的：

<header class="app-header">
  <a href="#" class="app-logo">
    <img src="{AppLogo}" alt="App Name" />
  </a>
</header>

首先去掉{AppLogo}周围的"。您想使用{AppLogo} 的值 - 不要使用包含 {AppLogo} 的字符串。

现在有两种方法可以实现你想要的：

资产方式

在项目根目录的某个位置，有一个stencil.config.ts 文件。在那里您可以指定复制任务。 你可以在这里阅读如何做到这一点：https://stenciljs.com/docs/config#copy

在您正确设置并将您的 ../assets/ 文件夹复制到您的 build 文件夹后，您可以通过将路径作为 src 来使用图像：

<header class="app-header">
  <a href="#" class="app-logo">
    <img src="./assets/logo.svg" alt="App Name" />
  </a>
</header>

汇总方式

您也可以使用汇总来导入它。 Stencil 使用 Rollup 作为它的模块打包器。 stencil.config.ts 基本上是一个 rollup.config 文件。 你可以在这里找到很多关于汇总的文档：https://rollupjs.org/guide/en#configuration-files

有一些汇总插件支持导入 .svg 文件：

• rollup-plugin-svg
• rollup-plugin-svgo
• rollup-plugin-svg-to-jsx

如果您使用其中任何一个，您将能够import 您的 .svg 文件。根据您使用的插件，AppLogo 会包含不同的内容。

例如 rollup-plugin-svg-to-jsx 将在导入时为您提供现成的 JSX-tag。所以在你这样做之后

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

你可以像这样使用它：

<header class="app-header">
  <a href="#" class="app-logo">
    <AppLogo />
  </a>
</header>