Angular directive

[luishcastroc]

Im integrating marked to an angular meta framework and im working in a POC to add the optimize img directive, in order to do that I need to add [ngSrc] to the image tag however when I try I get this instead [ngsrc], I'm using a renderer

[UziTech]

Can you provide some code so we can see what you tried?

[luishcastroc]

sure this is pretty much the implementation:

const renderer = new marked.Renderer();
    renderer.code = (code, lang) => {
      // Let's do a language based detection like on GitHub
      // So we can still have non-interpreted mermaid code
      if (lang === 'mermaid') {
        return '<pre class="mermaid">' + code + '</pre>';
      }

      if (!lang) {
        return '<pre><code>' + code + '</code></pre>';
      }
      const langClass = 'language-' + lang;
      const html =
        '<pre class="' +
        langClass +
        '"><code class="' +
        langClass +
        '">' +
        code +
        '</code></pre>';
      return html;
    };

    renderer.image = (href, text) => {
      const titleString = text ? `title="${text}"` : '';
      const textString = text ? `alt="${text}"` : '';
      if (this.markedConfig.useOptimizedImg?.enabled) {
        const loading = this.markedConfig.useOptimizedImg?.options?.loading;
        const width = this.markedConfig.useOptimizedImg?.options?.width;
        const height = this.markedConfig.useOptimizedImg?.options?.height;
        const priority = this.markedConfig.useOptimizedImg?.options?.priority;
        const srcSet = this.markedConfig.useOptimizedImg?.options?.srcset;

        const loadingString = loading ? `loading="${loading}"` : '';
        const widthString = width ? `width="${width}"` : '';
        const heightString = height ? `height="${height}"` : '';
        const priorityString = priority ? `priority="${priority}"` : '';
        const srcSetString = srcSet ? `srcSet="${srcSet}"` : '';

        const imgString = `<img [ngSrc]="${href}" ${srcSetString} ${titleString} ${widthString} ${heightString} ${loadingString} ${priorityString} >`;

        return imgString;
      }
      return `<img src="${href}" ${titleString} ${textString}>`;
    };

    marked.use(
      gfmHeadingId(),
      markedHighlight({
        async: true,
        highlight: (code, lang) => {
          lang = lang || 'typescript';
          if (!Prism.languages[lang]) {
            if (lang !== 'mermaid') {
              console.warn(`Notice:
    ---------------------------------------------------------------------------------------
    The requested language '${lang}' is not available with the provided setup.
    To enable, import your main.ts as:
      import  'prismjs/components/prism-${lang}';
    ---------------------------------------------------------------------------------------
        `);
            }
            return code;
          }
          return Prism.highlight(code, Prism.languages[lang], lang);
        },
      }),
      {
        renderer,
        pedantic: false,
        gfm: true,
        breaks: false,
        sanitize: false,
        smartypants: false,
        xhtml: false,
        mangle: false,
      }
    );

    this.marked = marked;

for some reason the imgString gets the [ngSrc] like this [ngsrc] which doesn't work in Angular.

hope this helps.

[UziTech]

Marked doesn't force lowercase ever. My guess is it is something that is happening after running through marked. Do you have anything that sanitizes the output?

[luishcastroc]

mmmmm that's a good question let me check that out cause that could be.