时间戳

首页 > 解决方案 > 如何在反应中添加图像

javascript - 如何在反应中添加图像

问题描述

我找不到从 URL 提供图像的正确语法。

<image src='url(' +${this.url}+ ')'
                 style={{
                   height: 'auto',
                   width: '100%'
                 }}></image>

你能给我一个资源来知道什么时候使用：${}, {}, ``, "" 吗？

标签： javascriptreactjs

解决方案

由于 html 属性不能像myattr='my'+dynamic+'valueReact 那样连接，因此为我们提供了花括号来使用动态值：

<image src={'url(' + this.url + ')'} />

请注意，连接是在花括号内完成的{}。

但是今天，我们主要使用 ES6+ 特性，因此使用+运算符连接它们是一个丑陋的解决方案。因此，我们使用波浪号键使用模板文字`

<image src={`url${this.url}`} />

要在模板文字中使用变量，我们使用${variable_name}.

此外，我怀疑这里的 url() 函数，你有没有在任何地方定义过？否则，您不应该使用，只需使用：

<image src={this.url} />

src 的值只是图像的路径，src="path.jpg"而不是src="url(path.jpg)".

另外，图像是一个组件吗？否则，它应该是<img />tag not <image />。如果image是组件，那么我建议您在组件中使用大写名称，即使它们是功能组件。

推荐阅读