React 中的影象標籤

Rana Hasnain Khan 2022年5月18日

React React Image

我們將介紹如何在 React 中新增影象。

React 中的影象標籤

首先，我們將在 index.html 檔案中新增一個類 root 的 div。

# react
<div id="root"></div>

在 index.tsx 檔案中，我們將定義影象的 name、url 和 title。

# react
import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

interface AppProps { }
interface AppState {
  name: string;
  url: string;
  title: string;
}

class App extends Component<AppProps, AppState> {
  constructor(props) {
    super(props);
    this.state = {
      name: 'React',
      url: 'https://images.pexels.com/photos/8549835/pexels-photo-8549835.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
      title: "Vase Image"
    };
  }

  render() {
    return ();
  }
}

render(<App />, document.getElementById('root'));

我們已經拍攝了一張示例照片。現在我們將通過在影象標籤中傳遞值來返回影象。

# react
<div>
           <img src={this.state.url} alt={`${this.state.title}'s picture`}  className="img-responsive" />
           <span>Hello {this.state.name}</span>
        </div>

因此，我們在 index.tsx 中的程式碼將如下所示。

# react
import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

interface AppProps { }
interface AppState {
  name: string;
  url: string;
  title: string;
}

class App extends Component<AppProps, AppState> {
  constructor(props) {
    super(props);
    this.state = {
      name: 'React',
      url: 'https://images.pexels.com/photos/8549835/pexels-photo-8549835.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
      title: "Vase Image"
    };
  }

  render() {
    return (
      
      <div>
           <img src={this.state.url} alt={`${this.state.title}'s picture`}  className="img-responsive" />
           <span>Hello {this.state.name}</span>
        </div>
    );
  }
}

render(<App />, document.getElementById('root'));

讓我們新增一些 CSS 程式碼來調整我們的影象大小。

# react
.img-responsive{
  width: 90vw;
}

輸出：

React 影象標籤

我們現在可以看到我們已經在 React 中輕鬆新增了影象。

Author: Rana Hasnain Khan

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

React 中的影象標籤

相關文章 - React Image