Picture URL is wrapped by a element on html output

[DrummerHead]

When building an HTML output, the basics.picutre attribute is used as src for the user picture, but it is also being wrapped by an a element as if it was a link.

Tested with jsonresume-theme-elegant and jsonresume-theme-slick

To recreate the error:

• Have a resume.json on JRS format with a picture attribute that is a full URL to a PNG or JPEG image
• install a JRS theme npm install --save jsonresume-theme-elegant
• run hackmyresume build resume.json -t node_modules/jsonresume-theme-elegant
• check the file out/resume.html
• search for the string src="

You will notice that the src attribute for the image is broken, an example:

<div class="card profile-card"><span class="profile-pic-container"><div class="profile-pic"><img data-src="holder.js/100x100" alt="John Doe" src="<a href="http://mcdlr.com/i/firefox.gif">http://mcdlr.com/i/firefox.gif</a>" itemprop="image" class="media-object img-circle center-block"/></div><div class="name-and-profession text-center"><h3 itemprop="name"><b>John Doe</b></h3><h5 itemprop="jobTitle" class="text-muted"></h5></div></span>

The same error appears using other themes, example error for jsonresume-theme-slick

                <div class="col-xs-3 col-sm-4">
                    <img class="avatar" src="<a href=" http://mcdlr.com/i/firefox.gif
                    ">http://mcdlr.com/i/firefox.gif</a>"/>
                </div>

Details by using debug flag:

  Platform:              darwin
  Node.js:               v5.5.0
  HackMyResume:          v1.8.0
  FRESCA:                ~0.6.0

Cheers!

[DrummerHead]

I confirm that using the dev version (installed via npm install hacksalot/hackmyresume#dev -g) also shows this issue

Using resume-cli does not show this issue

[paskal]

Same there, I've reported it as mudassir0909/jsonresume-theme-elegant#85. Here are two files, generated by hackmyresume and resume-cli:

[root@umonkey cv]# egrep 'src.+gravatar.+center-block"/>' elegant-* -o
elegant-hackmyresume.html:src="holder.js/100x100" alt="Dmitry Verhoturov" src="<a href="https://www.gravatar.com/avatar/8b2d47d99e6af64b89e6a0721e3485eb?s=200">https://www.gravatar.com/avatar/8b2d47d99e6af64b89e6a0721e3485eb?s=200</a>" itemprop="image" class="media-object img-circle center-block"/>
elegant-resume-cli.html:src="holder.js/100x100" alt="Dmitry Verhoturov" src="https://www.gravatar.com/avatar/8b2d47d99e6af64b89e6a0721e3485eb?s=200" itemprop="image" class="media-object img-circle center-block"/>

[vrajeshkanna]

I had to workaround by hardcoding my gravatar image URL in the theme source(resume-header.hbs) itself.
<img src="https://en.

[guix77]

It's because of the Markdown conversion from plain text links to links:

HackMyResume/src/renderers/jrs-generator.js

Line 38 in ab6e7ee

return rezHtml = rezHtml.replace(/@@@@~[\s\S]*?~@@@@/g, val => MDIN( val.replace( /~@@@@/g,'' ).replace( /@@@@~/g,'' ) ));

Workaround: suppose you have ./resume.json and ./picture.jpg in the root folder. In resume.json use this, so the built resume in ./out/ will have the proper path to the picture:

"picture": "../picture.jpg",

The automatic conversion from plain text links to links causes other issues, for instance if the theme expects an URL in plain text and generates a link, then the link will de doubled with the MD auto conversion.

In the long term I guess that an option to disable automatic "MD" links conversion might be the best move.

[karlitos]

I can confirm the workaround proposed by @guix77. The Markdown conversion causes lot of issues actually. I have a helper in my template converting local or remote images to Base64, but it fails when the url, after the processing by HackMyResume looks like @@@@~https://my-remote-image.jpg~@@@@

By now, I have to disable the image processing by default and control the template behaviour with environment variables