Reactjs img 标签未在 src: 中呈现字符串？

Question

我正在尝试在 reactjs 中渲染图像。我正在处理一个 URL 并将其存储在一个全局 var URL 中。我想在 img 标签 src 中使用填充的 URL：

我曾尝试执行以下操作，但没有奏效

<img

        src={url}

        style={{

          marginTop: '1px',

          marginLeft: '1px',

          marginBottom: '1px',

        }}

        height="500"

        alt=""

      />

我的元素检查显示以下内容：

<img src height="500" alt="" style="margin-top: 1px; margin-left: 1px; margin-bottom: 1px;">

var url = '';

export default function ImageGallery() {

  const classes = useStyles()

  getList()

  return (

    <div>

    <Paper className={classes.root}>

      <img

        src={{url}}

        style={{

          marginTop: '1px',

          marginLeft: '1px',

          marginBottom: '1px',

        }}

        height="500"

        alt=""

      />

            <Link to={'/imageGalleryGrid'} style={{ textDecoration: 'none' }}>

              <Button variant="contained" className={classes.button}  style={{

                                                                               marginTop: '1px',

                                                                               marginLeft: '550px',

                                                                               marginBottom: '70px',

                                                                             }}>

                Checkout Gallery

              </Button>

            </Link>

      </Paper>

    </div>

  )

}

图像未显示：我在控制台中看到正在打印 URL。另外，我可以转到 URL 并查看图像。

Answer 1

关于语法和数据类型正确的语法是您在第二个示例中使用的语法（一对花括号）：<img src={url} ...`添加第二对花括号意味着使用ES6/ECMA Script 2015 中提供的Object Literal Property Value Shorthand。这与编写相同<img src={{url:url}} ...因此，即使您url包含一个空字符串，该src属性也需要一个字符串，并使用它的toString()方法转换其他内容。这就是为什么您[Object object]在检查时会看到它。关于react生命周期，“全局变量”和状态如果您在文件初始化并稍后更新时总是将空字符串存储在 var 中，react 无法知道该变量已更新，因为这是 react 生命周期之外的状态。如果您能够通过正常的函数调用（没有像从服务器获取数据等异步方式）获得正确的 URL，则可以从该函数返回 URL 并在组件内部调用它（的 render 方法）并使用它直接（而不是使用一些“全局变量”）：function Image() {&nbsp; var url = getImageUrl();&nbsp; return <img src={url}/>;}如果您不是那么幸运并且需要异步调用来获取您的 URL，您需要引入本地状态（例如通过使用react hooks）或其他一些存储信息并将其作为 prop 传递给组件的方法。顺便说一句：顶级var声明是否是全局变量在很大程度上取决于您的（构建或运行时）环境。由于它不是导出的，它也可能是该模块/文件的局部变量，不能从其他模块修改。