How to extract image src from a string easily with JavaScript?
Sometimes, we want to extract image src from a string easily with JavaScript.
In this article, we’ll look at how to extract image src from a string easily with JavaScript.
How to extract image src from a string easily with JavaScript?
To extract image src from a string easily with JavaScript, we can create a div, set the innerHTML property of the div to the img element string.
And then we can select the img element from the div and get the src property from it.
For instance, we write:
to define the getImgSrc property to a function that takes the imgStr string.
In it, we create a div with createElement .
Then we set div.innerHTML to imgStr .
And then we call div.querySelector with 'img' to get the img element.
Finally, we return the img.src property.
As a result, the console log logs 'http://example.com/img.jpg' .
Conclusion
To extract image src from a string easily with JavaScript, we can create a div, set the innerHTML property of the div to the img element string.
And then we can select the img element from the div and get the src property from it.
Related Posts
Sometimes, we want to set an image's src attribute to another image URL with JavaScript.…
Sometimes, we want to extract the number part of a string with JavaScript. In this…
Sometimes, we want to get the image src value with jQuery and JavaScript. In this…
Как получить src картинки?
Мне нужно получить значение е? src для того, чтобы потом сравнить с другим значением
если src == ‘romb.gif’ — то выполняем что-либо
если src == ‘romb_2.gif’ — то ничего не делаем
Ссылка на комментарий
Поделиться на других сайтах
39 ответов на этот вопрос
- 0
- Выбрать
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.JavaScript, работающий с изображениями
В этом руководстве по JavaScript вы изучите 14 распространенных сценариев, с которыми вы, вероятно, столкнетесь, если еще не встречались при работе с изображениями.
1. Показать изображение в виде обычного HTML
Создайте тег статического изображения с атрибутом src с URL-адресом изображения в файле HTML.
Как видите, я использую веб-сайт picsum в демонстрационных целях. Это позволяет мне получить случайный URL-адрес изображения с определенными размерами, переданными в конце URL-адреса.
Довольно просто, правда?
Давайте посмотрим, как установить атрибут src динамически с помощью JavaScript.
2. Установите атрибут Src в JavaScript.
В файле HTML создайте тег изображения HTML следующим образом:
В JavaScript получите ссылку на тег изображения с помощью метода querySelector ().
Затем назначьте URL-адрес изображения атрибуту src элемента изображения.
В качестве альтернативы вы можете установить атрибут src для тега изображения, используя синтаксис квадратных скобок, например:
3. Установите несколько атрибутов Src в JavaScript.
Допустим, у вас есть три элемента изображения на HTML-странице в разных частях.
Используя атрибут ID или class, вы можете легко настроить таргетинг на каждый элемент изображения отдельно, чтобы установить другое значение для атрибута src, о котором я расскажу позже в этой главе.
Позвольте мне показать вам, что �� НЕ делать при наличии нескольких тегов статических изображений на вашей HTML-странице.
В предыдущем примере я использовал метод querySelector () для нацеливания на элемент изображения, который отлично работает для одного элемента изображения.
Чтобы получить ссылку на все три элемента изображения, нам нужно использовать querySelectorAll ().
Это получит все ссылки на элементы изображения и создаст из них массив списка узлов.
Это нормально работает, но у этого подхода есть одна проблема.
Допустим, вам больше не нужен первый элемент изображения, и удалите его из HTML-кода.
Второй и третий элементы изображения будут иметь первое и второе изображения.
4. Создайте элемент изображения в JavaScript.
Создайте элемент изображения, используя метод createElement() для объекта документа.
Затем установите URL-адрес изображения в его атрибут src.
Наконец, добавьте элемент изображения в иерархию DOM, добавив его к элементу body.
В качестве альтернативы вы можете использовать конструктор Image() , который создает новый экземпляр HTMLImageElement, который функционально эквивалентен document.createElement («img»).
При желании вы можете передать ему параметры ширины и высоты.
Это будет эквивалентно этому в HTML:
5. Добавьте встроенный стиль к изображению в JavaScript.
Используя свойство style, мы можем применить стиль к элементу изображения непосредственно в JavaScript.
Как вы можете видеть в приведенном ниже примере, я применил к нему границу, а также стили радиуса границы.
6. Добавьте атрибут ID к изображению в JavaScript.
Добавление нескольких стилей к элементу изображения по отдельности было бы утомительным.
Вместо этого давайте создадим новое правило CSS внутри тегов стиля или внешнего файла CSS с селектором идентификатора, как показано ниже.
Затем назначьте его атрибуту ID элемента изображения, используя его свойство ID.
Как вы знаете, это довольно просто, поскольку значение атрибута ID не должно дублироваться на одной странице.
Кроме того, вы можете вызвать метод setAttribute() для объекта img с двумя аргументами: имя атрибута и значение.
7. Добавьте атрибут класса к изображению в JavaScript.
В отличие от атрибута ID, вы можете добавить несколько имен классов в один элемент изображения или одно и то же имя класса в несколько элементов изображения или их комбинации.
Допустим, у нас есть правило CSS с именем класса .img-rounded-border.
Затем мы можем добавить этот класс к элементу изображения, используя метод add () в свойстве classList, передавая имя класса в качестве аргумента.
Если вы хотите добавить еще один класс к тому же элементу изображения, вам придется снова использовать метод add ().
Кроме того, вы можете использовать метод setAttribute (), чтобы добавить один или несколько атрибутов класса к элементу изображения в одной строке.
Когда вы используете setAttribute, все предыдущие классы, добавленные к элементу, будут сброшены.
8. Прикрепите событие щелчка к элементу изображения.
Чтобы прикрепить событие щелчка к элементу изображения, вызовите метод addEventListener () для объекта img.
Для этого потребуется два аргумента:
- click = название события и
- function () <> = функция обратного вызова
9. Переключить селектор CSS при нажатии на изображение.
Допустим, вы хотите добавить и удалить границу изображения, когда пользователь щелкает по нему, используя класс .img-rounded-border.
Все, что вам нужно сделать, это вызвать метод toggle (), передав имя класса в качестве аргумента свойства classList внутри функции обратного вызова события щелчка.
В качестве альтернативы объект события, который передается в функцию обратного вызова, может использоваться для доступа к элементу изображения для добавления или удаления класса.
10. Получить выбранный элемент изображения при нажатии
Мы можем получить любую информацию о выбранном элементе, используя объект event, который передается в функцию обратного вызова, как я упоминал ранее.
Допустим, вы хотите получить URL-адрес выбранного изображения.
Используя e.target.src, вы можете легко получить URL-адрес изображения, который является значением атрибута src.
11. Создание нескольких изображений в JavaScript
Допустим, мы хотим создать 10 изображений динамически.
Сначала повторите 10 раз, используя цикл for.
Затем создайте элемент изображения внутри цикла и установите атрибут src со случайным URL-адресом изображения из picsum.
Добавьте все 10 изображений к элементу body.
Давайте добавим отступы между изображениями.
Создайте новое правило CSS внутри тегов стиля или внешнего файла CSS.
Затем добавьте его к элементам изображения внутри цикла с помощью метода add ().
12. Условный стиль в изображении цикла
Давайте изменим конкретное изображение на другой стиль.
Давайте изменим свойство радиуса границы для 6-го элемента, используя условие if.
13. Добавьте события щелчка ко всем изображениям.
Присоедините метод addEventListener () к элементу img на каждой итерации, который принимает два аргумента.
- click = название события и
- function () <> = функция обратного вызова
Обязательно используйте let вместо var в заголовке цикла for при объявлении переменной i, чтобы избежать подъема.
14. Примените класс CSS только к изображению, по которому щелкнули мышью.
Я добавил класс img-margin к каждому элементу img, который даст некоторое пространство между изображениями при начальной загрузке.
При щелчке по любому элементу img к этому элементу добавляется класс img-rounded-border, вокруг которого будет отображаться толстая красная граница.
Но что, если мы хотим добавить класс img-rounded-border только к выбранному элементу изображения, а не ко всем остальным.
Одно из решений, позволяющих исправить это, — сначала удалить класс .img-rounded-border из всех изображений, прежде чем добавлять его к изображению, по которому щелкнули мышью.
Работать с изображениями в JavaScript всегда весело. Надеюсь, вам понравился этот урок из 14 распространенных сценариев работы с изображениями.
Я знаю, что существует гораздо больше сценариев, чем этот. Пожалуйста, дайте мне знать, если вы хотите, чтобы я добавил что-нибудь к этому уроку!
jQuery get img src – Get the Source of an Image Using jQuery
To get the source of an image, we can use jQuery to get the img src using the attr() method.
The jQuery attr method will return the location of the file as a string.
Say we have the following html:
If we used the jQuery attr() method on the image, $('#img1').attr('src'); , we would get the following returned:
An example using the attr() method to get and set the img src
Below is an example of how we can use jQuery to get the src of an image using the attr() method and how we can later set the src of that image.
Let’s say we have another image called “example-img2” which is in the same location as the image above. When we click the button, we want to swap out that image. We will use the jQuery attr() method to get the src of the image and store it as a variable. We will use the JavaScript indexOf() method to get the location of “example-img1” and use the substring() method to get the first part of the image location. Then we will add the new image file name and replace the old image. Here is the JavaScript code below:
The final code and output for this example is below:
Hopefully this article has been useful in helping you understand the jQuery attr() method for getting an img src.
Other Articles You'll Also Like:
- 1. Using jQuery to Change the Text Color of a Paragraph
- 2. jQuery Display None
- 3. How to Use jQuery to Clear a textarea Field
- 4. jQuery delay – How to Delay the Start of a Method
- 5. How to Clear an Input Field Using jQuery
- 6. jQuery after – Insert HTML After Another Element
- 7. Using jQuery to Scroll to Div
- 8. Using jQuery to Remove Attribute from HTML Element
- 9. Using jQuery to Add Class to HTML Element
- 10. How to Check if Element Exists Using jQuery
About The Programming Expert
The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.
Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.
At the end of the day, we want to be able to just push a button and let the code do it’s magic.