html - 如何将图像插入 Web 组件？

Question

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

我收到 2 个错误:

AppLogo 已声明，但其值从未被读取。

和

找不到模块 ../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} 的字符串。

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

Assets 方式

在项目根目录的某处，有一个 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>

Rollup 方式

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

有一些 rollup 插件支持导入 .svg 文件:

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

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

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

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

您可以像这样使用它:

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