Hello,
In my @vue/cli 4.0.5 app with Laravel 7 Backend API as data source I want to add watermark to my image “on fly”
I found this https://www.vuescript.com/custom-watermarks/
example and try to use it but I got error in console :
Access to image at 'http://local-ctasks-api.com/storage/tasks/-task-3/design-new-task.png' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
design-new-task.png:1 GET http://local-ctasks-api.com/storage/tasks/-task-3/design-new-task.png net::ERR_FAILED
where http://local-ctasks-api.com/ is hosting of Laravel Backend API on my local ubuntu apache.
To escape CORS error I use "barryvdh/laravel-cors": "^1.0.5" on Laravel Backend API side
and it works for me.
I do in my vue file :
<img
v-if="taskHasImage(taskRow)"
class="pull-left m-1 p-1 task_image"
:src="taskRow.filenameData.image_url"
alt="Task Image"
v-watermark="watermarkOptions"
/>
...
<script>
import {bus} from '../../../src/main'
import axios from 'axios'
...
import plugin from '@serializedowen/vue-img-watermark'
Vue.use(plugin)
data: function () {
return {
...
watermarkOptions : { // eslint-disable-line
// "bottomleft", "bottomright", "topleft", "topright", "center", "fill"
mode: "bottomright",
textBaseline: "middle",
font: "15px Arial",
fillStyle: "white",
content: "@vuescript.com",
rotate: 30
}, // https://www.vuescript.com/custom-watermarks/
Reading description at https://github.com/serializedowen/vue-img-watermark :
I see mentioned of setScopedConfig and registerCustomStrategy using but I did not find examples of
these methods using. Can it be that I have CORS errors because of misconfiguring of these methods?
Please, give full code of your demo example.
How to fix my error ?
Thanks!