TS2322：类型“Promise<any>”不可分配给类型“字符串”答案

【问题标题】：TS2322: Type 'Promise<any>' is not assignable to type 'string'TS2322：类型“Promise<any>”不可分配给类型“字符串”
【发布时间】：2021-11-05 23:24:21
【问题描述】：

在我的反应应用程序中，我正在尝试导入 img 源，但出现任何错误

TS2322: Type 'Promise<any>' is not assignable to type 'string'.如何修复它或在变量中导入元素的正确方法是什么？

这是我的代码：

import React, { FC } from "react";
import "./barkingRoad.scss";



const BarkingRoad: FC = () => {

const slidex = import("./../../../../assets/images/small/boomerang-site1.jpg");

return (
    <div className="boomerang-slider-barkingRoad">
    
        <div className="project-data">
            <div className="boomerang-site-slide">
                <div className="prev"><a href="#">Previus</a> </div>
                <div>
                    <img src={slidex} /> //getting error
                </div>
                <div className="next"><a href="#">Next</a> </div>
                {/* srcSet={`${slide} 360w, ${slide} 768w, ${slide} 1366w  `} */}
            </div>
        </div>

    </div>
)

}

export default BarkingRoad;

这是可行的：

const slidex = require("./../../../../assets/images/small/boomerang-site1.jpg");

但得到一个错误为 ;

 8:20  error  Require statement not part of import statement

【问题讨论】：

标签： reactjs typescript typescript-typings

【解决方案1】：

我建议两个选项。

像这样在组件外部导入。

const slidex = require("...");

const BarkingRoad: FC = () => {
...
}

使用await 关键字。

 const BarkingRoad: FC = async () => {
 ...
 const slidex = await require...
 }

如果你在公共目录下定义了图片，你可以使用url，而不是在代码中导入。

【讨论】：

找不到名称“异步”。 - 错误引发
更新了答案。
Type '() => Promise<JSX.Element>' is not assignable to type 'FC<{}>'. Type 'Promise<Element>' is missing the following properties from type 'ReactElement<any, any>': type, props, keyts(2322) const BarkingRoad: React.FC<{}>
好像你在使用typescript。看看这个，了解如何在 typescript 中定义 async 函数。 stackoverflow.com/questions/38744159/…
是的，我同意。但是我的情况我无法获得正确的声明方式，您能帮帮我吗？

【解决方案2】：

const slidex = import 是动态导入，因此重新调整 promise<any> 和 src 会收到直接 url 字符串

尝试直接设置：

<img src="./../../../../assets/images/small/boomerang-site1.jpg" />

【讨论】：

我正在尝试加载 ts 文件而不是图像，需要动态过程

【解决方案3】：

尝试像这样导入：

import slidex from "./../../../../assets/images/small/boomerang-site1.jpg";

【讨论】：

我收到错误An import declaration can only be used in a namespace or module.
把这个import语句放在const BarkingRoad: FC = () => {上面

【解决方案4】：

导入函数返回一个不是字符串的 Promise。

您可以使用以下解决方案：

 const BarkingRoad: FC = async () => {   
 ...
 const slidex = await import('...');
 ...

【讨论】：

'await' expressions are only allowed within async functions and at the top levels of modules. 当我使用const slidex = await import('...');时
按照 siruis 的建议，您还必须添加 async 关键字。 here