如何将图像插入 Web 组件？

Posted 2023-02-21

【中文标题】如何将图像插入 Web 组件？

【英文标题】：How can I insert an image into a Web Component?

【发布时间】：2019-07-13 00:24:30

【问题描述】：

我正在尝试将图像插入到使用 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"  />
        </a>
      </header>
    );
  

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

【问题讨论】：

你不能这样声明Applogo吗：var Applogo = "../assets/logo.svg"？

我认为我不需要将其设为变量。我需要先导入它，然后它应该加载...但是我在导入时遇到模块未找到错误。

只能导入JS文件AFAIK

阅读本文，看看是否有帮助：***.com/questions/54708824/…

【参考方案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"  />
  </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"  />
  </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>

【讨论】：

您能否提供一个更完整的示例来说明如何配置/实施资产方式？遗憾的是，官方文档没有解释如何处理图像等资产。

@bcody 我认为官方文档确实包含有关该主题的大量信息（或者您有什么特别遇到的问题吗？）：stenciljs.com/docs/copy-tasks

官方文档没有显示当 StencilJS 项目被构建并与其他应用程序集成时，这一切是如何工作的。根据我目前的理解，StencilJS 只能将资源文件复制到 dist 目录中，这些文件最终会被打包到 NPM 工件中，但它们不会以任何方式编译到 Web 组件的 JS 模块中。如果应用想要使用资源文件，它需要引用 NPM 包中的“collections”目录并以某种方式集成它。

@bcody 没错。如果要将资产编译到 JS 模块中，则必须使用另一种（Rollup）方式。

Rollup 方式实际上不需要对 Stencils 构建管道做任何事情，这就是为什么您在官方文档中找不到任何信息的原因。只需查找有关 Rollup 的一些信息或搜索处理加载要编译到 JS 代码中的文件类型的 Rollup 插件。或者甚至可以编写您自己的 Rollup 插件 - 取决于您想要做什么，它甚至可能没有那么难。然而，关于如何将 Rollup 插件加入 Stencils 构建过程的文档在官方文档中。 stenciljs.com/docs/plugins