#angular7
#angular7
Вопрос:
Мое требование — увеличивать изображение при наведении курсора мыши на это изображение
Я использую этот пакет в своем проекте Angular6: https://www.npmjs.com/package/ngx-image-zoom
Вот URL-адрес редактора stackblitz: https://stackblitz.com/edit/autocompcus?file=src/app/app.component.html
Я не могу выяснить, где что-то пошло не так.
Заранее спасибо
Ответ №1:
Его работа заключается в добавлении [увеличение] =»2″ для одного изображения без добавления [Полное изображение]
Ответ №2:
- Используйте [Zoomode]=»‘click'», чтобы включить масштабирование при нажатии
- Используйте [Zoomode]=»‘hover'», чтобы включить масштабирование при наведении курсора
Я обновил stackblitz — https://stackblitz.com/edit/autocompcus-j5kujt .
Комментарии:
1. @AkhilVenkataSaiGrandhi, можешь попробовать мой Stackblitz WS? В моем WS он работает нормально..
2. Да, вы использовали 2 изображения, но мне нужно одно изображение. Но, поскольку я не упоминал об этом в своем вопросе, вы дали правильный ответ
3. @AkhilVenkataSaiGrandhi Согласно документу npm lib, нам нужны два изображения, одно из которых — thumbImage, а другое — fullImage, поэтому, если вы удалите какое-либо из них, оно не будет работать. По сути, полное изображение перекрывает изображение большого пальца, поэтому, если вы действительно хотите использовать эту функцию, вам нужно создать два одинаковых изображения с разным разрешением. Думаю, теперь я могу развеять ваши сомнения, спасибо..
Ответ №3:
Попробуйте использовать аналогичный пакет npm для увеличения углового изображения ng-img-magnifier. Вот рабочая ДЕМОНСТРАЦИЯ. Это очень легко реализовать и полностью настраивается.
<ng-img-magnifier [thumbImage]='img' [fullImage]='img2'
[top]='top' [right]='right'
[lensWidth]='lensewidth' [lensHeight]='lensheight'
[resultWidth]='resultWidth' [resultHeight]='resultheight'
[imgWidth]='imgWidth' [imgHeight]='imgheight'>
</ng-img-magnifier>