Скачать изображение из результатов API -- javascript поле с участием html поле с участием node.js поле с участием express поле с участием download пол Связанный проблема

Download Image from API Results


0
vote

проблема

русский

Я создаю приложение, которое использует онлайн API для рерантива изображений на основе ключевого слова для поиска. Я запускаю петлю Foreach для рендеринга 12 изображений на странице в Divs. Есть ли способ загрузить фотографии, если я нажимаю кнопку, даже когда я не знаю, что результаты поиска будут заранее, потому что разные пользователи будут вводить разные ключевые слова? Я использую Node.js Express и JavaScript

 <Код> <!DOCTYPE html>  <html>  <head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <title></title>    <link rel="stylesheet" href="">  </head>  <body>    <h1>GIF</h1>    <a href="/home">HOME</a>    <form action="/home/gif" method="POST">      <input type="text" name="gif" placeholder="Search Gif By Keyword">      <input type="submit" value="Go">    </form>    <div class="gif">      <h2>Seached Results</h2>      <% gif.forEach((value) => { %>        <img src="<%= value.images.original.url %>">      <%})%>    </div>  </body>  </html>  
Английский оригинал

I am creating an app that uses an online API to render images based off a searched keyword. I run a forEach loop to render 12 images in the page in divs. Is there a way to download the pictures if I were to click a button even when I don't know what the results of search will be ahead of time because different users will type in different key words? I am using node.js express and javascript

<!DOCTYPE html>  <html>  <head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <title></title>    <link rel="stylesheet" href="">  </head>  <body>    <h1>GIF</h1>    <a href="/home">HOME</a>    <form action="/home/gif" method="POST">      <input type="text" name="gif" placeholder="Search Gif By Keyword">      <input type="submit" value="Go">    </form>    <div class="gif">      <h2>Seached Results</h2>      <% gif.forEach((value) => { %>        <img src="<%= value.images.original.url %>">      <%})%>    </div>  </body>  </html>
</div
              
 
 

Список ответов

0
 
vote

Вы, кажется, используете библиотеку шаблона, но вы не упомянули, какой из них. Не зная ничего об этом, вы можете попробовать использовать ссылку на якорную связь с помощью атрибута download. Например:

 <код> <div class="gif">   <h2>Seached Results</h2>   <% gif.forEach((value) => { %>     <img src="<%= value.images.original.url %>">     <a href="<%= value.images.original.url %>" download>Download</a>   <%})%> </div>   

Таким образом, когда пользователь нажимает на ссылку, браузер будет загружать все, что на HREF. (Который в этом случае должен быть образ.)

Обратите внимание, что <код> download - атрибут HTML5. Вы можете проверить совместимость браузера для него здесь: http://caniuse.com/#search= ,

 

You appear to be using a template library, but you didn't mention which one. Without knowing anything more about that, you could try using an anchor link with the download attribute. For example:

<div class="gif">   <h2>Seached Results</h2>   <% gif.forEach((value) => { %>     <img src="<%= value.images.original.url %>">     <a href="<%= value.images.original.url %>" download>Download</a>   <%})%> </div> 

This way, when the user clicks the link, the browser will download whatever is at the href. (Which in this case should be the image.)

Note that download is an HTML5 attribute. You can check the browser compatibility for it here: http://caniuse.com/#search=download.

</div
 
 

Связанный проблема

1  Столбец Tabulator с JSX - выполнение функций класса  ( Tabulator column with jsx executing class functions ) 
Я пытаюсь использовать React-Tabulator, но у меня проблемы с рендером функции внутри моих столбцов таблицы. Функция возвращает JSX, но она использует другие к...

0  Удалите подстроку из строки в jQuery [дублировать]  ( Remove a substring from a string in jquery ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> Этот вопрос уже есть ответы здесь : ...

1  Как заменить адреса электронной почты с ссылками Mailto на веб-странице Live?  ( How to replace email addresses with mailto links in a live web page ) 
Представьте себе это: вы столкнулись с веб-страницей, который говорит: «Просто отправьте сообщение user@example.com», но чтобы на самом деле отправить электро...

1  JavaScript не работает над динамическим контентом  ( Javascript not working on dynamic content ) 
У меня есть страница, где в HTML Div загружен с другой страницы. На родительской странице у меня есть JavaScript, который имеет элементы, которые применяются ...

0  Сортировка не работает в смарт-таблице угловой JS  ( Sorting is not working in smart table angular js ) 
Сортировка смарт-таблицы не работает по какой-то причине после использования в качестве пользовательской директивы. Можете ли вы помочь мне, что я сделал не т...

1  Код образец плагина PhoneGap VideoPlayer  ( Phonegap videoplayer plugin sample code ) 
Я пытаюсь реализовать видеозаписи в моем телефонном приложении. У меня есть идея реализовать этот плагин: https://github.com/dawsonloudon/videoPlayer Эт...

4  Каковы разница между $ (документом) .bind («готовая», функция) и $ (документ). Ready (функция (функция () {}))  ( What are the difference between document bindready function and docume ) 
Я хочу обновить от Verysjs версии 2.0.0 до 2.1.5 Вот код: <код> define(['jquery', 'test.js'], function ($, test) { var test = new $.test({ ...

0  Как закрыть всплывающее окно, когда видео YouTube играет на кнопке кнопки ESC?  ( How to close popup when youtube video is playing on esc button button ) 
Нажмите меня, чтобы увидеть демонстрацию Когда видео не играет, то кнопка ESC нажала всплывающее окно, но он не работает при воспроизведении видео. ...

1  Обновление поле PDF штрих-кода в IOS и устройстве Android  ( Updating a pdf barcode field in ios and android device ) 
Я создал одну корпус Acrobat, используя радиообъекты, текстовое поле, кнопку, флажок и штрих-код в Adobe Acrobat Pro. После этого я открыл эту форму в Adobe...

0  Команда STEART BOBLE не работает, когда добавляю новый файл JS  ( Stencil bundle command is not working when i add new js file ) 
Я добавил несколько файлов JS в моей теме (Track-CLI), а когда я запускаю stencil bundle COMMENT, ошибки JS получили бросок. Я пробовал удаление <код> app...

1  UI-маршрутизатор в ионной структуре  ( Ui router in ionic framework issue ) 
У меня проблемы с тем, чтобы получить свои маршруты, чтобы соответствовать моим взглядам. У меня есть следующие маршруты: <код> .state('tab.account', { ur...

362  JavaScript Глобальный механизм событий  ( Javascript global event mechanism ) 
Я хотел бы поймать каждую неопределенную ошибку функции. Есть ли глобальная обработка ошибок в JavaScript? Чехол на использование ловит вызовы функций от Flas...

0  JavaScript Foreach Array Ключевые значения, вывод в HTML  ( Javascript foreach array key values output to html ) 
Как сердите к клавишам ARRAY THRU, чтобы вывести свои значения в HTML? Расположение Я работаю, - это миниатюрная сетка, 3 колонны на 2 ряда. Каждый миниатюр...

0  Модель только показывает идентификатор в вложенной модели в парусах  ( Model only show id in nested model in sails ) 
Так что я разрабатываю приложение, используя парус JS. Я хочу отправить нить вместе с его комментариями как ответ. Вот моя модель thread.js <код> module...

3  Есть ли способ различить связь против мышиных взаимодействий в Windows 8 (HTML / JS)  ( Is there any way to distinguish touch vs mouse interactions in windows 8 html ) 
Я в настоящее время строю приложение, которое имеет много внимания на панорамирование, которое выглядит и чувствует себя красиво, когда касается и манипулируе...

Связанный проблема

1  Столбец Tabulator с JSX - выполнение функций класса 
0  Удалите подстроку из строки в jQuery [дублировать] 
1  Как заменить адреса электронной почты с ссылками Mailto на веб-странице Live? 
1  JavaScript не работает над динамическим контентом 
0  Сортировка не работает в смарт-таблице угловой JS 
1  Код образец плагина PhoneGap VideoPlayer 
4  Каковы разница между $ (документом) .bind («готовая», функция) и $ (документ). Ready (функция (функция () {})) 
0  Как закрыть всплывающее окно, когда видео YouTube играет на кнопке кнопки ESC? 
1  Обновление поле PDF штрих-кода в IOS и устройстве Android 
0  Команда STEART BOBLE не работает, когда добавляю новый файл JS 
1  UI-маршрутизатор в ионной структуре 
362  JavaScript Глобальный механизм событий 
0  JavaScript Foreach Array Ключевые значения, вывод в HTML 
0  Модель только показывает идентификатор в вложенной модели в парусах 
3  Есть ли способ различить связь против мышиных взаимодействий в Windows 8 (HTML / JS) 



© 2021 www.qaru.top All Rights Reserved. Q&A House все права защищены


Licensed under cc by-sa 3.0 with attribution required.