Question

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

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

您能给我一个消息源来知道何时使用的方法：${}，{}，``，“”？

Answer 1

在您的情况下，您应该写：

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

当有一个变量时使用{}，当它是一个字符串时使用“”，在反引号``

中使用$ {}

Answer 2

``主要用于如果您不想破坏像''或""这样的代码或字符串，

console.log('string text line 1\n' +
'string text line 2');

解决方案使用``

console.log(`string text line 1

字符串文本行2`）;

${}在``中使用，等于+中的''

var a = "hello";
 console.log(`string text line 1 ${a}
string text line 2`);

{}是JSON语法，用于style object，如果要添加内联，则JSON仅接受

""与''

只需使用``而不是

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

Answer 3

由于无法像myattr='my'+dynamic+'value那样连接html属性，因此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是组件，那么即使它们是功能组件，我也建议您在组件中使用大写名称。

Answer 4

Definition congruence := λ (exp : Set) (equiv : exp -> exp -> Prop) ⇒
    ∀ (ep : pattern exp) (a b : exp),
        equiv a b -> equiv (ep a) (ep b).

，如果它在道具中，则放在pattern

Answer 5

编写jsx时，您所有的JavaScript代码都应位于╭ ╮ ╯ ╰ │ • ─ ├运算符之内。

{}在使用template literal syntax时使用，即``。

${}

Answer 6

使用模板文字reference

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

如何在react中添加图像

6 个答案: