Jak zmienić źródło obrazu JavaScript
JavaScript może zintegrować się z HTML, aby zaspokoić wymagania użytkowników. Według integracji użytkownicy mogą zastosować funkcję do zmiany źródła obrazu. Na przykład właściwość SRC jest wykorzystywana do określania źródła obrazu. Źródła mogą zawierać lokalny system plików, a także adres URL obrazu. Niniejszy przewodnik służy zmianie pliku źródła obrazu za pomocą właściwości SRC. Wszystkie najnowsze przeglądarki obsługują właściwość SRC do zlokalizowania obrazu źródłowego.
Ten post obsługuje następujące wyniki uczenia się:
- Jak zmienić źródło obrazu w JavaScript
- Przykład 1: Zmień źródło obrazu lokalnego obrazu pliku w JavaScript
- Przykład 2: Zmień źródło obrazu obrazu internetowego w JavaScript
Jak zmienić źródło obrazu w JavaScript
JavaScript jest niezbędny do dynamicznej zmiany wyświetlania obrazu. Na przykład img Element HTML zapewnia src właściwość modyfikowania źródła obrazu. Źródłem obrazu może być system lokalny lub dowolny obraz URL.
Składnia do zastosowania właściwości SRC za pomocą JavaScript znajduje się poniżej:
Składnia
dokument.getElementById („MyImageID”).src = "Newsource.png ";Parametr
Opis parametrów jest następujący:
- myImageId: Określa identyfikator obrazu.
- src: odnosi się do źródła obrazu.
Przykład 1: Zmień źródło obrazu obrazu lokalnego
Przykład jest dostosowany do zmiany źródła obrazu za pośrednictwem pliku lokalnego w JavaScript. Przykład obejmuje pliki kodu HTML i JavaScript.
Kod HTML
Przykład, aby zmienić źródło obrazu w JavaScript
W tym kodzie src atrybut jest wykorzystywany do pobierania obrazu "komputer.jpg". Potem „Zmień przycisk obrazu”Jest dodawany do pliku HTML, który wyzwala zmianycr () metoda. zmianycr () Metoda jest napisana w pliku JavaScript.
Kod JavaScript
funkcja reflentcr ()dokument.getElementById („imgid”).src = "książki.jpg ";
W tym kodzie zmianyrc () Metoda pobiera element za pomocą jego id ”imgid”I ustawia wartość„src„Atrybut tego elementu.
Wyjście
Wyjście pokazuje, że po naciśnięciu „Zmień przycisk obrazu„Plik źródłowy obrazu jest zmieniany, a nowy obraz jest wyświetlany.
Przykład 2: Zmień źródło obrazu obrazu internetowego
Do zmiany źródła obrazu za pośrednictwem adresu URL w JavaScript jest używany inny przykład. Pełny kod jest podzielony na pliki HTML i JavaScript.
Kod HTML
Przykład do zmiany źródła obrazu internetowego w JavaScript
Opis kodu jest jak poniżej:
- Po pierwsze, Szerokość i wysokość obrazu są przypisane do obrazu wewnątrz tagi.
- Potem URL obrazu jest dostarczane przez src właściwość wyświetlania obrazu w oknie przeglądarki.
Kod JavaScript
funkcja reflentcr ()dokument.getElementById („imgid”).src = "https: // cdn.Pixabay.COM/Photo/2022/07/28/23/42/Rainbow-7350780__340.jpg ";
W tym kodzie zmianycr () Metoda służy do wyzwolenia zdarzenia, gdy użytkownik kliknie przycisk, aby zmienić źródło obrazu.
Wyjście
Wyjście ilustruje, że gdy użytkownik kliknie „Zmień obraz”Nowy obraz zastępuje istniejący.
Wniosek
JavaScript zapewnia src atrybut, aby zmienić źródło obrazu, określając ścieżkę pliku. Na przykład getElementId () Metoda jest wykorzystywana do wyodrębnienia elementu HTML przez id, a następnie SRC właściwość zmieni obraz źródłowy. Po ekstrakcji przypisany jest nowy plik obrazu źródłowego. Tutaj nauczyłeś się zmieniać źródło obrazu w JavaScript. W tym celu zademonstrowaliśmy zestaw przykładów w różnych scenariuszach.