React 中图片的几种引入方式

图片引入：

import React from "react";

import logo from "./logo.svg";

function App() {
  return (
    <div style={{ margin: "50px auto", width: 400 }}>
      <img
        src="https://img0.baidu.com/it/u=3436810468,4123553368&fm=26&fmt=auto"
        alt="图片无法显示"
        title="图片"
        width={300}
        height={300}
      />
      <img
        src={logo}
        alt="图片无法显示"
        title="图片"
        width="300"
        height="300"
      />
    </div>
  );
}

export default App;

效果图：

背景图引入：

     <div
        style={{ background: `url(${logo}) no-repeat`, width: 200, height: 200 }}
      ></div>
      <div
        style={{
          background:
            'url("https://img0.baidu.com/it/u=3436810468,4123553368&fm=26&fmt=auto") no-repeat',
          width: 200,
          height: 200,
        }}
      ></div>
      <div
        style={{
          background: `url('https://img0.baidu.com/it/u=3436810468,4123553368&fm=26&fmt=auto') no-repeat`,
          width: 200,
          height: 200,
        }}
      ></div>

效果图：

css文件中引入：

.bg {
  background: url("本地路径/网页图片地址/Base64编码") no-repeat;
  height: 200px;
  width: 200px;
}

es6模块化：

//暴露
export function img(){
  return ("Base64编码")
};
export const img={
  a:"Base64编码"
}

//接收
import { img } from "./img";

background: `url(${img()}) no-repeat`

background: `url(${img.a}) no-repeat`

图片引入和背景图设置都需要加尺寸。