TIL 82 l reactの画像を挿入し、FontAwsomeを適用する

2839 ワード
React TIL js はんのう テキストリンク
JSで作成したhtml、cssファイルをreactにインポートしてレンダリングする過程で、画像とFontAwsomeアイコンがポップアップされたことを体験したことがありますか...エラー解決プロセスを共有します.

react>Jsフォルダイメージを挿入するには:


画像をPublicフォルダに挿入し、画像ラベルにパスをロードすることで画像を挿入します.

1.公衆に画像フォルダを作成する



2.次にsrcで動作する場所で画像をロードするときにパスを追加します。



reactでJavaScriptで作成した画像タグを使用するとexparkとして出力されます.だから上のように、反応に合った文法で書きます.

react>FontAwsomeの適用方法


1.font-awesome npmインストール

npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome

インストール2.font-awesomeカテゴリ


(よく使われる3つの無料カテゴリしか書いていません.挿入したいアイコンが他のカテゴリに属する場合は、npmコマンドをチェックしてインストールする必要があります.)

  • Regular
    npm i -S @fortawesome/free-regular-svg-icons
    npm i -S @fortawesome/pro-regular-svg-icons

  • Solid
    npm i -S @fortawesome/free-solid-svg-icons
    npm i -S @fortawesome/pro-solid-svg-icons

  • Brand
    npm i -S @fortawesome/free-brands-svg-icons
    • 複数のカテゴリをダウンロードする場合、@ベースのコマンドを一度にインストールします.npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons

    3.インストールの確認


    package.json>dependenciesに'@fortawemes/'がインストールされていることがわかります.

    4.処理中のファイルへの接続

  • アイコンを適用したい構成部品ファイルの上部に、次のコードを挿入します.
    最初の行のコードは、react-fontawesomeをインポートするコードです.
    2行目のコードは、必要なアイコンをインポートするコードです.{faSearch}セクションはfontAwesomeのホームページに入り、アイコン名を確認し、アイコンを入力します.
    • import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faSearch } from "@fortawesome/free-solid-svg-icons";
    最後にreact jsファイルのhtmlコードを変更します.iラベルは使用されません.iタグでロードし、挿入位置に次のコードを入れる.
    <FontAwesomeIcon icon={faSearch} className="search" />
    PostgreSQL 2 | CMD, DB, TABLE
    ThinkPHPにおけるvolistタグの使用