search

zhanziyang / vue-croppa

A simple straightforward customizable mobile-friendly image cropper for Vue 2.0.
https://zhanziyang.github.io/vue-croppa/
ISC License
967 stars 128 forks source link

How to resolve initial image via Webpack #51

Closed PrimozRome closed 6 years ago

PrimozRome commented 6 years ago

I am using vue-croppa in Nuxt.js project which runs webpack to resolve images.

I am trying to setup initial image but it doesn't work for me. I tried:

<croppa initial-image="~/assets/img/profiles/1.png"></croppa>
<croppa initial-image="@/assets/img/profiles/1.png"></croppa>
<croppa initial-image="./assets/img/profiles/1.png"></croppa>
<croppa :initial-image="'./assets/img/profiles/1.png'"></croppa>

Any help is appreciated. Thanks.

PrimozRome commented 6 years ago

Never mind, found in the docs that I can supply image into slot="initial"

<croppa>
   <img src="~/assets/img/profiles/1.png" slot="initial">
</croppa>

But now I have different problem. If I use initial image like above then drag and drop image does not work anymore. What is the reason?

zhanziyang commented 6 years ago

You need to remove the current image on croppa to drag and drop a new one.

PrimozRome commented 6 years ago

@zhanziyang yes I figured that out. Is there any special reason that drag and drop would not work even over image? I think it's more logical UIX case...

zhanziyang commented 6 years ago

@PrimozRome Um.. There is not a special reason for it. Good suggestion. I will consider implementing it in the next version. We only need to change line 848 of the src code.

https://github.com/zhanziyang/vue-croppa/blob/e7d7f9eb27b7f9927450018355e57277fffa91c6/src/cropper.vue#L847-L850

PrimozRome commented 6 years ago

@zhanziyang good thanks. I will be waiting for the update. I's a minor usability issue ...