小编Sub*_*bin的帖子

我正在尝试在div容器内展示图像，但无法在div标签内插入图像。

* {
  margin:0;
  padding:0;
  background:#fff;
  box-sizing:border-box;
}

body {
  font-family: verdana;
}

section {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:1200px;
  height:400px;
  background:#fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  display:flex;
}


.content {
  width: 55%;
  height:100%;
  padding: 2% 3%;
  text-align:justify;
  line-height:1.5em;
  font-size: 18px;
}

.image {
  width:45%;
  height:100%;
  background:url('https://i.postimg.cc/2S7fjBxD/cyberpunk-mockup.jpg') ;
}

<section>
  <div class="content">
    <h1></h1>
  </div>
  <div class="image"></div>
</section>

我将在下面附加codepen链接以供输出参考：我希望图像适合div的右侧（class =“ image”）

链接：https : //codepen.io/subin_s/pen/oOKKoY?editors=1100

我正在使用他们自己的文档学习 REACT JS。当我看到JSX 防止注入攻击部分时，我对这个主题感到困惑。JSX 如何防止注入攻击？\n请有人解释一下。

关于该主题的文档中的上述文本是：

\n

在 JSX 中嵌入用户输入是安全的。

\n

const title = response.potentiallyMaliciousInput;\n// This is safe:\nconst element = <h1>{title}</h1>;\n

Run Code Online (Sandbox Code Playgroud)\n

默认情况下，React DOM 在渲染 JSX 中嵌入的任何值之前都会对其进行转义。因此，它确保您永远无法注入任何未在应用程序中明确编写的\xe2\x80\x99s。所有内容在渲染之前都会转换为字符串。这有助于防止 XSS（跨站点脚本）攻击。

\n

首先，我选择了联系表单容器内的所有输入标签，然后添加了单击事件侦听器并调用了一个函数。那是行不通的。

它抛出一个错误： Uncaught TypeError: input.addEventListener is not a function。

<div class="form-container">
    <h1>SEND US A MESSAGE</h1>
    <div class="form">
      <input type="text" placeholder="Full Name">
      <input type="text" placeholder="E-Mail">
      <textarea name="Message" id="message" cols="30" rows="10" placeholder="Message"></textarea>
      <button><i class="fa fa-paper-plane" aria-hidden="true"></i>SEND</button>
    </div>
  </div>

.form-container {
  margin: 5rem 0;
  height: auto;
  // text-align: center;

  h1 {
    color: $header-main;
    font-size: 2rem;
    text-align: center;
  }

  .form {
    input[type="text"],
    textarea,button {
      display: block; 
      margin: 2rem auto;
      width: 600px;
      padding: 1rem;
      border-radius: 1rem;
      border: 2px solid #d6cfcf;
      outline: none;
    }
  }
} …