“SearchIcon”未定義 no-undef

Question

我試圖在我的搜索欄中顯示一個搜索圖標，但它不起作用。 我的代碼是

import React, { useEffect } from "react";

//31915c5e

const API_URL = 'http://www.omdbapi.com?apikey = 31915c5e'

const App = () => {
 
    const searchMovies = async (title) => {
        const response = await fetch(`${API_URL}&s=${title}`);
        const data = await response.json();

        console.log(data.search); 
    }

    useEffect(() => {
        searchMovies('spiderman');
    }, []);



    return (
        <div className="app">
            <h1>MovieLand</h1>

            <div className="search">
                <input
                    placeholder="search for movies"
                />

            /*https://react-icons.github.io/react-icons/icons?name=gi*/
                <img
                    src={SearchIcon}
                    alt="search"
                    
                />

            </div>

        </div>
    );
}

export default App;

在我的搜索欄中顯示一個搜索圖標。 在瀏覽器上它顯示 'SearchIcon' is not defined no-undef

Answer 1

有不同的方法可以做到這一點，我要么安裝@fortawesome/react-fontawesome 和@fortawesome/free-solid-svg-icons 然后用它來做，或者，我更喜歡的選項包括使用內聯 styles，定位作為輸入標簽背景的圖標； 它會是這樣的：

import React, { useState } from "react";
import searchIcon from "path/to/search-icon.svg";

function SearchInput() {
  const [searchTerm, setSearchTerm] = useState("");

  return (
    <div>
      <input
        type="text"
        placeholder="Search"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        style={{
          padding: "0.5rem 0.5rem 0.5rem 2rem",
          background: `url(${searchIcon}) no-repeat`,
          backgroundSize: "1.5rem",
          backgroundPosition: "0.5rem center",
        }}
      />
    </div>
  );
}

export default SearchInput;

這將創建一個帶有搜索圖標作為其背景的輸入元素，該圖標將位於輸入字段中間左側的輸入內。 您可以使用background-position屬性調整圖標的 position，也可以使用background-size屬性調整圖標的大小。