使用base64的js内联样式的组件背景

时间:2017-10-13 10:14:12

标签: css reactjs base64

我在base 64中有一个带背景的简单块:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <style>
        #footer {
            background: #00b2d6 url("data:image/png;base64,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") repeat scroll 0 0 / 274px auto;
            padding: 50px;
        }
    </style>
  </head>
  <body>
    <footer id="footer">
      <div>Simple text</div>  
    </footer>
  </body>
</html>

React是否允许使用内联样式?如何制作具有这种背景的组件?

var footerStyle = {
  backgroundImage: ...  ,
  backgroundSize: 'cover',
  backgroundRepeat  : 'repeat',
  textAlign: 'center',
  padding: '100px',
  fontSize: '50px',
  boxSizing: 'border-box'
};

const Footer = () => <div style={footerStyle}>Discover unlimited possibilities</div>;

3 个答案:

答案 0 :(得分:2)

您可以像在第一个代码段中那样执行此操作,但是您需要使用background代替backgroundImage,因为您还要定义后备颜色(或将这些颜色分隔为backgroundColorbackgroundImage分别。)

由于您要将url包装在双引号中,因此需要将整个background属性包装在单引号(')或反引号(`中):

var footerStyle = {
  background: '#00b2d6 url("data:image/png;base64,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") repeat scroll 0 0 / 274px auto',
  backgroundSize: 'cover',
  backgroundRepeat: 'repeat',
  textAlign: 'center',
  padding: '100px',
  fontSize: '50px',
  boxSizing: 'border-box'
};

const Footer = () => <div style={footerStyle}>Discover unlimited possibilities</div>;
 
ReactDOM.render(<Footer />, document.getElementById("app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

答案 1 :(得分:1)

我只建议在React中使用img标签。

import * as React from "react";

export const Image = () => {
  return (
    <div>
      <img src={"data:image/gif;base64,<data>"} />
    </div>
   );
}

ReactDOM.render(<Image />, document.getElementById("root"));

答案 2 :(得分:0)

您可以使用与CSS相同但使用简单引号:

var footerStyle = {
    backgroundImage: 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQ [... (edited)] ORK5CYII=")',
    backgroundSize: 'cover',
    backgroundRepeat  : 'repeat',
    textAlign: 'center',
    padding: '100px',
    fontSize: '50px',
    boxSizing: 'border-box'
};

const Footer = () => <div style={footerStyle}>Discover unlimited possibilities</div>;