javascript 响应搜索图标未显示在监视器上

ivqmmu1c 于 2023-01-29 发布在 Java

关注(0)|答案(1)|浏览(114)

我试过在我的搜索栏内显示搜索图标，但它不起作用。我的代码是

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;

在我的搜索栏中显示搜索图标

JavaScript

来源：https://stackoverflow.com/questions/75269968/react-search-icon-is-not-displayed-on-monitor

1条答案

按热度按时间

2guxujil1#

有不同的方法来做这件事，我会安装@fortawesome/react-fontawesome和@fortawesome/free-solid-svg-icons，或者，我更喜欢的选择是使用内联样式，将图标定位为输入标记的背景;应该是这样的：

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;

这将创建一个以搜索图标为背景的input元素，该图标将位于input字段的左中位置。您可以使用background-position属性调整图标的位置，也可以使用background-size属性调整图标的大小。

赞(0）回复(0）举报 2023-01-29

我来回答

javascript 响应搜索图标未显示在监视器上

1条答案

相关问题

热门标签

最新问答