Image tool does not work

[Awilum]

Included

And

   tools: {
     image: {
       class: SimpleImage,
       inlineToolbar: ['link'],
     },

but I can't insert images, tool is not displaying.

[mylastore]

same here image tool is not displaying this the error I get

Module Tools was skipped because of TypeError: Cannot read property 'prepare' of undefined

` `` image: { class: SimpleImage, inlineToolbar: true }

[neSpecc]

Can't reproduce. Is it still happen?

[avdkishore]

Can't reproduce. Is it still happen?

Yes, it is still happening. Unable to get the image tool option to work.

[jimjones26]

I am unable to get it to work either. I define it in the tool list, everything runs fine and no errors are produced in the console, but the image tool icon does not show up in the toolbar.

[neSpecc]

@jimjones26 this tool does not have a Toolbar Icon. See Image Tool if you need file uploading.

[jimjones26]

I have the following in the tools section of the config: image: { class: SimpleImage, inlineToolbar: true }, But I see nothing on the UI. I also tried this: image: { class: SimpleImage, inlineToolbar: ["link"] }, And again no indication anywhere in the ui of how to add an image.

To be clear I do have other plugins working fine, the SimpleImage plugin is the only one I cannot get working.

Using: "@editorjs/editorjs": "^2.15.1", "@editorjs/simple-image": "^1.3.3",

[jimjones26]

I'm at a loss guys, I'm not sure how to get the Simple Image plugin to work.

[hong-duc]

Ah I get it, all I need is to paste a image link to the editor then it will appear. example: https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg :man_facepalming:

The readme don't say anything about it, and I have to watch the gift very closely to understand the magic :rofl:

Also if the link contain param https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500 will not work

[jimjones26]

@hong-duc Thanks! I feel like an idiot! Pasting an image in works perfectly!

I think maybe this issue is a non issue with functionality, but maybe the docs could be updated to indicate a url must be pasted in first?

[edmundmunday]

@jimjones26 - don't feel like an idiot, this behavior is incredibly unintuitive. Had exactly the same problem until I found this thread.

[chrish2]

Still haven't figured out? The SimpleImage tool does not display !

[c0b41]

@Codth read the comment https://github.com/editor-js/simple-image/issues/13#issuecomment-558297272

[SohaibShafiq1]

https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg

can you please paste you code here. I still not able to see the option in toolbar

[Siddharth2207]

Ah I get it, all I need is to paste a image link to the editor then it will appear. example: https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg

The readme don't say anything about it, and I have to watch the gift very closely to understand the magic

Also if the link contain param https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500 will not work

Thank you

[Ashik590]

Is it a good idea pasting link of img?

[edricgalentino]

But now, the new issue was the image url is using base64 url so it take so many memory and also makes my program get slower. It took quite long to see the image or even open the program. Any idea?

[kumawat30rahul]

my image upload or directly pasting to the editor is also not working,:

import Embed from "@editorjs/embed"; import Table from "@editorjs/table"; import Paragraph from "@editorjs/paragraph"; import List from "@editorjs/list"; import Warning from "@editorjs/warning"; import Code from "@editorjs/code"; import LinkTool from "@editorjs/link"; import Image from "@editorjs/image"; import Raw from "@editorjs/raw"; import Header from "@editorjs/header"; import Quote from "@editorjs/quote"; import Marker from "@editorjs/marker"; import CheckList from "@editorjs/checklist"; import Delimiter from "@editorjs/delimiter"; import InlineCode from "@editorjs/inline-code"; import SimpleImage from "@editorjs/simple-image"; import VideoTool from "simple-video-editorjs";

export const EDITOR_JS_TOOLS = { // NOTE: Paragraph is default tool. Declare only when you want to change paragraph option. // paragraph: Paragraph, header: Header, table: Table, list: List, warning: Warning, code: Code, linkTool: LinkTool, embed: { class: Embed, config: { services: { // Specify supported embed services (e.g., YouTube, Twitter, etc.) youtube: true, twitter: true, // Add more services as needed }, }, }, image: Image, raw: Raw, quote: Quote, marker: Marker, checklist: CheckList, delimiter: Delimiter, inlineCode: InlineCode, simpleImage: SimpleImage, };

this the error i am getting: {body: '\n\n

\n<meta char…cess/task_queues.js:82:21)\n\n\n', code: 404, headers: {…}} body : "\n<html lang="en">\n\n<meta charset="utf-8">\n\n\n\n

NotFoundError: Not Found
    at C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\server\/app.js:48:8
    at Layer.handle [as handle_request] (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:328:13)
    at C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:286:9
    at Function.process_params (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:346:12)
    at next (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:280:10)
    at C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:646:15
    at next (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:265:14)
    at Function.handle (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:175:3)
    at router (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:47:12)
    at Layer.handle [as handle_request] (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:328:13)
    at C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:286:9
    at Function.process_params (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:346:12)
    at next (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:280:10)
    at middleware (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\webpack-hot-middleware\middleware.js:38:48)
    at Layer.handle [as handle_request] (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:328:13)
    at C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:286:9
    at Function.process_params (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:346:12)
    at next (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:280:10)
    at C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\server\/app.js:24:3
    at Layer.handle [as handle_request] (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:328:13)
    at C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:286:9
    at Function.process_params (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:346:12)
    at next (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:280:10)
    at cookieParser (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\cookie-parser\index.js:71:5)
    at Layer.handle [as handle_request] (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:328:13)
    at C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:286:9
    at Function.process_params (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:346:12)
    at next (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:280:10)
    at urlencodedParser (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\body-parser\lib\types\urlencoded.js:82:7)
    at Layer.handle [as handle_request] (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:328:13)
    at C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:286:9
    at Function.process_params (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:346:12)
    at next (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:280:10)
    at C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\body-parser\lib\read.js:137:5
    at AsyncResource.runInAsyncScope (async_hooks.js:197:9)
    at invokeCallback (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\raw-body\index.js:231:16)
    at done (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\raw-body\index.js:220:7)
    at IncomingMessage.onEnd (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\raw-body\index.js:280:7)
    at IncomingMessage.emit (events.js:387:35)
    at endReadableNT (internal/streams/readable.js:1317:12)
    at processTicksAndRejections (internal/process/task_queues.js:82:21)

\n\n

[Laktus]

For some reason i get a 500 when i try to upload, care to explain why?