JSX 如何正确返回图像？ Üebersicht 小部件答案

【问题标题】：JSX how to return an image correctly? Üebersicht widgetJSX 如何正确返回图像？ Üebersicht 小部件
【发布时间】：2021-06-18 07:49:45
【问题描述】：

我想将图像作为小部件返回。

我将我的 photo.png 放在 myFile.jsx 旁边的文件夹 images 中。

我总是遇到同样的错误：

无法遍历依赖关系图：找不到 /Users/macbookpro/Library/Application Support/Übersicht/widgets/my file/myFile.jsx 所需的模块“./images/photo.png”/Users /macbookpro/Library/Application Support/Übersicht/widgets/my file/myFile.jsx

我也尝试过：将照片移动到我的桌面，使用require，使用import .. from ..。

这里有代码：

import { css } from "uebersicht";
// import photo from "./images/photo.jpg";
// import photo from "./Users/macbookpro/Desktop/photo.png";

export const render = () => {
  return (
    <div>
      <img src="./images/photo.png" />
      {/* <img src="./Users/macbookpro/Desktop/photo.png" /> */}
      {/* <img src={require("./images/photo.png")} /> */}
      {/* <img src={require("./Users/macbookpro/Desktop/photo.png")} /> */}
    </div>
  );
};

【问题讨论】：

标签： image widget runtime-error jsx

【解决方案1】：

由于 myFile.jsx 实际上是 uebersicht 的一个组件，因此您必须在 src 中包含您的小部件文件夹名称。

例如，如果您的 photo.png 在 example.widget/images 文件夹中，您应该是：

【讨论】：