javascript - 如何在 react 中添加图像

Question

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

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

你能给我一个来源来了解何时使用:${}、{}、``、""吗？

Answer 1

由于 html 属性无法像 myattr='my'+dynamic+'value 那样串联起来React 为我们提供了大括号来使用动态值:

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

注意，连接是在大括号内完成的 {} .

但是今天，我们主要使用 ES6+ 功能，因此使用 + 将它们连接起来运算符是一个丑陋的解决方案。因此，我们使用 template literal使用波浪号键`

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

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

<小时/>

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

<image src={this.url} />

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

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