Images not displayed

[NicolasDrapier]

Hi there,

Following this issue, I followed the doc and used it with my cloud service (Cloudinary). The image is well uploaded, and I recover well the url that updates in the block as you can see.

Unfortunately, when I save the content and display it on another page with <Dante content={my_content}/ retrieved from the database, everything is displayed except the images.

My code :

const Editor = () => {
  return <Dante
    body_placeholder={'Try to write'}
    onChange={editor => { myEditor = editor }}
    widgets={[
      ImageBlockConfig({
        options: {
          upload_url: "my_special_url_that_works_well",
          upload_callback: (ctx, img) => {
            alert('file uploaded: ' +
              ctx.data.url)
          },
          upload_error_callback: (ctx,
            img) => {
            console.log(ctx)
          },
        },
      }),
    ]} />;
};

Need some help?

Thank you very much.

[michelson]

Hi Nicholas, what happens when you inspect the block on chrome dev tools? is the image tag shown ? what happens on react dev tools ? did the block get the proper props ?

[NicolasDrapier]

Hi ! Thank you for your answer !

First, when I upload an image using the widget, it prints an alert with the URL as expeted. And if I check my cloud service, the image is uploaded.

If I display the content:

And the console log of blocks:

In my cloud service:

And the block props with the react dev tools :

I can't see what looks wrong :( Nicolas

[michelson]

Uhmm thats wierd, can you paste the generated html too?

El dom., 27 de septiembre de 2020 6:04 a. m., Nicolas Drapier < notifications@github.com> escribió:

Hi ! Thank you for your answer !

First, when I upload an image using the widget, it prints an alert with the URL as expeted. And if I check my cloud service, the image is uploaded.

If I display the content: [image: image] https://user-images.githubusercontent.com/33694593/94360771-48c44b00-00b0-11eb-9b16-d4a15e0c4f0c.png

And the console log of blocks: [image: image] https://user-images.githubusercontent.com/33694593/94360810-77422600-00b0-11eb-9e8c-527e9d689a84.png

In my cloud service: [image: image] https://user-images.githubusercontent.com/33694593/94360828-92ad3100-00b0-11eb-9e88-44abd7377e4e.png

And the block props with the react dev tools : [image: image] https://user-images.githubusercontent.com/33694593/94360908-fc2d3f80-00b0-11eb-8c54-9bea443202be.png

I can't see what looks wrong :( Nicolas

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/michelson/dante2/issues/239#issuecomment-699607931, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAC5SBYZE5336IA7NGL76DSH35YHANCNFSM4R2YIKZQ .

[NicolasDrapier]

In the src property of image, I replace my cloud bucket with "mycloud" before paste it

<div data-contents="true">
   <h1 class="graf graf--h2 is-selected" data-block="true" data-editor="3in64" data-offset-key="ar27o-0-0">
      <div data-offset-key="ar27o-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"><span data-offset-key="ar27o-0-0"><span data-text="true">This is a test for images</span></span></div>
   </h1>
   <figure class="graf graf--figure  " data-block="true" data-editor="3in64" data-offset-key="3qajd-0-0" contenteditable="false">
      <div>
         <div class="aspectRatioPlaceholder is-locked">
            <div class="aspect-ratio-fill"></div>
            <img src="http://res.cloudinary.com/mycloud/image/upload/v1601197005/grlencrfccjmyzeuhulj.jpg" class="graf-image" contenteditable="false" alt="http://res.cloudinary.com/mycloud/image/upload/v1601197005/grlencrfccjmyzeuhulj.jpg">
            <div></div>
         </div>
         <figcaption class="imageCaption">
            <div data-offset-key="3qajd-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"><span data-offset-key="3qajd-0-0"><span data-text="true">This is the image caption</span></span></div>
         </figcaption>
      </div>
   </figure>
</div>

If I paste just the tag generated in a new html file , the image is shown:

Is it a bug in my project ?

EDIT: If I wrap the image inside the div, it does not work. Is the css broke for me ?

<div class="aspectRatioPlaceholder is-locked">
            <img src="http://res.cloudinary.com/mycloud/image/upload/v1601197005/grlencrfccjmyzeuhulj.jpg"
                class="graf-image" contenteditable="false"
                alt="http://res.cloudinary.com/mycloud/image/upload/v1601197005/grlencrfccjmyzeuhulj.jpg">
        </div>

EDIT 2: aspectRatioPlaceholder alone works, is-locked alone works, but both does not work.

[michelson]

thing is, there is an aspect ratio div that should have a height value: like this:

the block must have this state :

which version of dante2 are you using ?

[NicolasDrapier]

I'm using Dante2 v0.5.0-rc9

[michelson]

ok, try 0.5.0-rc26 , let me know how it goes

[NicolasDrapier]

It still doesn't work :( When I hovered my mouse on the image link, it displayed this

I think the 0px is the problem

[michelson]

do you have some link where I can see your implementation ?

[NicolasDrapier]

My repo is private, is it ok if I add you temporarily as a collaborator ?

[michelson]

sure , no problem

[NicolasDrapier]

Hum after reflexion that's not a good idea. I have som config files with passwords :|

But here is my implementation

Content admin page:

const Editor = () => {
  return <Dante
    body_placeholder={'Start typing'}
    onChange={editor => { myEditor = editor }}
    widgets={[
      ImageBlockConfig({
        options: {
          upload_url: "myurl",
          upload_callback: (ctx, img) => {
            alert('file uploaded: ' +
              ctx.data.url)
          },
          upload_error_callback: (ctx,
            img) => {
            console.log(ctx)
          },
        },
      }),
    ]} />;
};

Print page

const Focus_Editor = () => {
    //Get route param
    const id = FlowRouter.getParam('_id');
    //Search document in mongodb
    const doc = Focus.find({ '_id': id }).fetch();

    if (typeof doc !== 'undefined' && doc.length > 0) {
        return <Dante content={doc[0].content} read_only={true} />;
    }
    return null;
};