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}的 value -不要使用包含{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/en#configuration-files

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

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

如果使用其中任何一个，都可以{。{1}} {.svg}文件。根据您使用的插件import的不同而有所不同。

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

AppLogo

您可以像这样使用它：

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

Answer 2

如果它是静态的，则可以使用applogo路径值简单地导出一个常量，如下所示：

import { Component } from "@stencil/core";
import appLogo from ".";

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

export const appLogo = "../assets/logo.svg";

我还建议为诸如 constants.ts 之类的静态内容创建一个单独的文件，并从此处导入文件徽标。

如何将图像插入Web组件？

2 个答案: