On attempting to integrate PhotoEditorSDK into an angular app for the first time, I'm seeing this error in the console.
My config is:
const container = document.getElementById('editor');
const editor = new $window.PhotoEditorSDK.UI.DesktopUI({
container: container,
license: '{ .. }',
assets: {
baseUrl: '/js/pesdk/assets' // <-- This should be the absolute path to your `assets` directory
},
editor: {
image: 'https://www.photoeditorsdk.com/assets/images/new/landingpage/platform_html5-4c8765e5.png',
},
style: {
width: 500,
height: 500,
},
});
The editor begins to load, the license call completes successfully, then I see:
react-dom.production.min.js:162 TypeError: t.addEventListener is not a function
at e._loadSource (PhotoEditorSDK.js:6)
at new e (PhotoEditorSDK.js:6)
at e.setImage (PhotoEditorSDK.js:73)
at e._setImage (PhotoEditorSDK.UI.DesktopUI.js:14)
at c (PhotoEditorSDK.UI.DesktopUI.js:14)
at e.setImage (PhotoEditorSDK.UI.DesktopUI.js:14)
at e.componentDidMount (PhotoEditorSDK.UI.DesktopUI.js:27)
at commitLifeCycles (react-dom.production.min.js:148)
at b (react-dom.production.min.js:156)
at t (react-dom.production.min.js:167)
The non-minified "development" react-dom file looks minified also, so this is a pain to debug.
Right now the image option must be an actual image object, not a string URL, that's the source of the error. So you need to first load the image, pass is it as an option and load the editor.
There is an angular demo project if you'd like to checkout:
https://github.com/imgly/pesdk-angular-demo
Related
I use vue and Play!Framework for my project.
Fronted: Vue.js 2.6.12
Backend: Play!Framework with Scala (2.12.8)
I use following Code snippet to upload an image to my server (This is copied from here: https://www.playframework.com/documentation/2.8.x/ScalaFileUpload
def uploadImage = Action.async{ implicit request =>
request.body.asMultipartFormData.map{ pic =>
val file = pic.files
val userIdTemp = pic.asFormUrlEncoded("userId")
val userId = userIdTemp.head.toInt
val itemIdTemp = pic.asFormUrlEncoded("itemId")
val itemId = itemIdTemp.head.toInt
val contentType = file.head.contentType
val filename = Paths.get(file.head.filename).getFileName.toString().toLowerCase()
val fileSize = file.head.fileSize
print("content Type: "+contentType)
print("filename: "+filename)
print("filesize: "+fileSize)
file.head.ref.moveFileTo(Paths.get(s"...\\vui\\src\\assets\\"+filename).toFile, replace = true)
print("***********************uploadImage -3")
service.saveImage(userId,itemId, filename.toString()) map{ foundItems =>
Ok(Json.toJson(foundItems))
}
}.getOrElse(null) // change me
}
I upload the image to the server and save the url related to an item in my database. This works fine. I display the images in my fronted with following code snippet:
<b-carousel-slide :img-src="require('../../assets/'+img.imgUrl)" >
</b-carousel-slide>
When i try to upload an image which i have uploaded before it works fine, but if i try to upload an image for the first time i get following exception:
Error: Cannot find module './001.jpg'
webpackContextResolve .*$:70
webpackContext .*$:65
render FoodMenuItem.vue:1302
renderList VueJS
render FoodMenuItem.vue:1274
VueJS 14
createNewImages FoodMenuItem.vue:809
uploadImage FoodMenuItem.vue:802
promise callback*p$1.then vue-resource.esm.js:230
uploadImage FoodMenuItem.vue:799
onSelect FoodMenuItem.vue:720
VueJS 33
updateTarget transporter.js:145
updated transporter.js:98
VueJS 13
click FoodMenuItem.vue:1256
VueJS 3
vue.runtime.esm.js:1897
VueJS 17
createNewImages FoodMenuItem.vue:809
uploadImage FoodMenuItem.vue:802
then vue-resource.esm.js:230
uploadImage FoodMenuItem.vue:799
onSelect FoodMenuItem.vue:720
VueJS 33
updateTarget transporter.js:145
updated transporter.js:98
VueJS 13
click FoodMenuItem.vue:1256
VueJS 3
The images is uploaded and the url is saved in the database, but my frontend crashed. When i "complete" refresh my browser and try it again, evertything works fine. My guess is, i can not access to image with require who are not loaded?
Is there a way to display this images without refreshing the browser? Is that a normal way to handle images in a web application? Any help will help!
If u need more information to help, just ask me:)
Thank you!
I tried a lot of things and i followed this steps:
https://blog.lichter.io/posts/dynamic-images-vue-nuxt/
As i told you above, i am uploading my images at the moment to the assets folder in UI. If i am in dev mode i can upload new images and show them with following code:
<img :src="require(`../../assets/${img.imgUrl}`)" >
And this works now. But when i change in production mode with:
npm run build
sbt compile stage
sbt start
The Frontend App will be a static app in the folder public/ui/
and then i don´t know the right relative path for the new images...
vue.config.js:
const path = require("path");
const webpack = require('webpack')
module.exports = {
outputDir: path.resolve(__dirname, "../public/ui"),
assetsDir: process.env.NODE_ENV === 'production' ? 'static':'',
devServer: {
public: 'localhost:8080',
headers: {
'Access-Control-Allow-Origin': '*',
}
},
configureWebpack: {
plugins: [
new webpack.DefinePlugin({
'process.conf': {
'RECAPTCHA_SITEKEY': JSON.stringify(process.env.RECAPTCHA_SITEKEY)
}
})
]
},
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
options.transformAssetUrls = {
img: 'src',
image: 'xlink:href',
'b-avatar': 'src',
'b-img': 'src',
'b-img-lazy': ['src', 'blank-src'],
'b-card': 'img-src',
'b-card-img': 'src',
'b-card-img-lazy': ['src', 'blank-src'],
'b-carousel-slide': 'img-src',
'b-embed': 'src'
}
return options
})
}
}
In which folder do i have upload the images? How can i reach the new uploaded images in production mode?
I was working on my Next.js project and while running it locally html img tag worked okay.
While building, I got a warning, to change it to Image component from Next.js
So I did, but now I get a warning:
Error: Invalid src prop (https://image.ceneostatic.pl/data/products/10813131/i-dixit.jpg) on next/image, hostname "image.ceneostatic.pl" is not configured under images in your next.config.js
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host
I read in the documentation that solution is to add a domain to next.config.js.
But 2 problems occurs to me here:
Even if I specify a domain like this, it doesn't work
module.exports = {
images: {
domains: ['image.ceneostatic.pl'],
},
};
I have my project connected to MongoDB, where are stored links to the images. What's more, I want an user to pass a link, while creating a new entry. So I don't want to have hard-coded domains, as I don't know which img an user will use.
Is there a way to omit domains list or a walk-around to use tag?
Thanks!
You can use something called next Loader via the following code:
import Image from 'next/image'
const myLoader = ({ src, width, quality }) => {
return `https://image.ceneostatic.pl/data/products/{src}/i-dixit.jpg`
}
var photoID = 10813131
const MyImage = (props) => {
return (
<Image
loader={myLoader}
src=photoID
width={500}
height={500}
/>
)
}
Your next.config.js:
module.exports = {
images: {
loader: 'imgix',
path: 'https://image.ceneostatic.pl',
},
}
All documentation is linked here.
When I deploy on vercel I get this error
Build error occurred
14:34:33.017 Error: Specified images.domains should be an Array of strings received invalid values ().
To get images showing on my screen locally I did these settings:
module.exports = {
env: {
NEXT_PUBLIC_STRAPI_URL: process.env.NEXT_PUBLIC_STRAPI_URL,
NEXT_PUBLIC_IMAGES_DOMAIN: process.env.NEXT_PUBLIC_IMAGES_DOMAIN,
},
publicRuntimeConfig: {
NEXT_PUBLIC_STRAPI_URL: process.env.NEXT_PUBLIC_STRAPI_URL,
NEXT_PUBLIC_IMAGES_DOMAIN: process.env.NEXT_PUBLIC_IMAGES_DOMAIN,
},
images: {
deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
imageSizes: [16, 32, 48, 64, 96],
domains: [process.env.NEXT_PUBLIC_IMAGES_DOMAIN],
path: "/_next/image",
loader: "default",
},
webpack(config) {
config.module.rules.push({
test: /\.svg$/,
use: ["#svgr/webpack"],
});
return config;
},
};
In my env.local I have put this
NEXT_PUBLIC_STRAPI_URL= ...
NEXT_PUBLIC_IMAGES_DOMAIN=localhost
I call my images with out of fetch like so
const Potato = ({ assets}) => {
<Image
src={process.env.NEXT_PUBLIC_STRAPI_URL + assets.hat.svg.url}
width={assets.hat.svg.width}
height={assets.hat.svg.height}
/>
}
Locally I can see the images, However I also get this error in my console.log when I run my app locally. I don't know how or why. Since my images load just fine. Maybe this is the reason that Vercel does not work but I don't know if the two are related.
All the settings above are almost exactly copy pasted from this video (watch from minute 10-16):
youtube
What I have tried so far:
Adding NEXT_PUBLIC_IMAGES_DOMAIN in the environment variables on Vercel with the name of my Heroku backend as value (just like I did for NEXT_PUBLIC_STRAPI_URL), which deployed fine, but I got a 500 server error. But then I also don't know how I should fix that.
Since you're using .env.local, you don't need to put env/publicRuntimeConfig in your next.config.js. You can remove those.
You also don't need to set path and loader for images if you're using the default. The only required value would be domains - and then you have the option for deviceSizes and imageSizes of course.
You are correct that you'll need to add your Environment Variables inside the Vercel project.
I use FilePond to show previously uploaded images with the load functionality. The files are visible, however I don't get a preview (which I get when uploading a file).
Should it be possible to show previews for files through load?
files: [{
source: " . $profile->profileImage->id . ",
options: {
type: 'local',
}
}],
First you have to install and register File Poster and File Preview plugins and here is the example of how to register it in your code:
import * as FilePond from 'filepond';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import FilePondPluginFilePoster from 'filepond-plugin-file-poster';
FilePond.registerPlugin(
FilePondPluginImagePreview,
FilePondPluginFilePoster,
);
then You have to set the server.load property to your server endpoint and add a metadata property to your files object which is the link to your image on the server:
const pond = FilePond.create(document.querySelector('file'));
pond.server = {
url: '127.0.0.1:3000/',
process: 'upload-file',
revert: null,
// this is the property you should set in order to render your file using Poster plugin
load: 'get-file/',
restore: null,
fetch: null
};
pond.files = [
{
source: iconId,
options: {
type: 'local',
metadata: {
poster: '127.0.0.1:3000/images/test.jpeg'
}
}
}
];
the source property is the variable you want to send to your end point which in my case I wanted to send to /get-file/{imageDbId}.
In this case it does not matter what your endpoint in the load property returns but my guess is, we have to return a file object.
I have a electron app, so in my dashboard page i am getting an error look like this
Error: Unhandled "error" event.(File not found)
I am using tradingview widget.
var widget = new TradingView.widget({
// debug: true, // uncomment this line to see Library errors and warnings in the console
fullscreen: true,
symbol: 'AA',
interval: 'D',
container_id: "tv_chart_container",
// BEWARE: no trailing slash is expected in feed URL
datafeed: new Datafeeds.UDFCompatibleDatafeed("http://abc.loc/api"),
library_path: "../../assets/charting_library/",
locale: "en",
// Regression Trend-related functionality is not implemented yet, so it's hidden for a while
drawings_access: { type: 'black', tools: [ { name: "Regression Trend" } ] },
disabled_features: ["use_localstorage_for_settings"],
enabled_features: ["study_templates"],
charts_storage_url: 'http://saveload.tradingview.com',
charts_storage_api_version: "1.1",
client_id: 'tradingview.com',
user_id: 'public_user_id'
});
How can I get the file name which can not be found. Thanks!