reactjs - Gatsby - 使用变量作为 src 导入 img 未按预期工作

Question

描述

我只是想从我的 json 文件中的路径条目将一个简单的 img 导入我的 gatsby 应用程序。

重现步骤

当我使用

<img
    alt="..."
    src={require("assets/images/todd-logo.svg")}
/>

图像按预期导入和渲染。但是当我尝试使用变量作为路径导入图像时：

<img alt="..." src={require(`${props.image}`)} />

我收到类似于以下内容的错误：

Error: Cannot find module 'assets/images/accomodation-room1.png'

即使我assets/images/todd-logo.svg在我正在处理的同一个 js 文件中使用 json 文件中的变量值，也会发生这种情况。当我使用变量作为路径时，就会出现这个问题。

我添加了一个带有以下参数的 jsconfig.json 来处理我的项目中的路径，同时使用插件'gatsby-plugin-resolve-src'（也许问题就在这里......？）

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "*": ["src/*"],
      "assets": ["src/assets"]
    }
  }
}

score 0 · Accepted Answer

您不需要任何插件来使用您的方法进行动态资产导入，我会删除它。您应该只知道路径是相对于正在导入图像的组件，而不是相对于 JSON 条目文件。用斜线 ( /) 和水平 ( ..) 检查相关性。

处理 SVG 是另一场战争，它们应该作为组件导入以允许渲染内部 SVG 的标签。您可以从另一个 StackOverflow 问题中遵循这种方法。

1 回答 1