如何将图像插入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从该文件中获取文件时，便会得到导出的所有内容。export.svg中没有任何内容。

您的用法也是错误的：

<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>

汇总方式

您也可以使用汇总导入。模具正在使用Rollup作为其模块捆绑器。该stencil.config.ts基本上是一个rollup.config文件。您可以在此处找到很多有关汇总的文档：https : //rollupjs.org/guide/zh-cn-configuration-files

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

• 汇总插件SVG
• 汇总插件svgo
• 汇总插件SVG到JSX

如果使用其中任何一个，都可以访问import.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>