Is it possible to insert an inline image (base64 encoded) via HTML or Markdown in README.md (GitHub)?
For example, this doesn't work:
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
Such a possibility exists:
But I would rather add an image to the project, similar to the README.MD itself, and only refer to the image that is part of the project.
More info: https://github.com/YourUserAccount/YourProject/blob/master/DirectoryPath/ReadMe.md
Related
I must show an img html element with src pointing to an image that is originally defined within the resources/images/ folder. So I have written, in my Blade template, the following line (normally it's correct):
<img class="illustration" src="{{ asset('/images/design_7.jpg') }}" alt=""/>
Problem : it doesn't work. Indeed, I don't find this image in the directory named public.
I've seen that Laravel automatically compiles the image if the latter is pointed by the CSS url property. Why isn't it the case with the html src attribute? How can I solve this problem?
Use mix.copyDirectory('resources/<your folder images>', 'public/<your destination folder images>) in your webpack.mix.js file.
(The css compiled images were in fact due to mix.less(<the css file>, public/<the css destination file>))
See 1) https://laravel.com/docs/8.x/mix#copying-files-and-directories and 2) https://laravel.com/docs/8.x/mix#working-with-stylesheets
I am retrieving text which contains images saved in WYSIWYG editor(Summernote). Is there a way to replace src attribute value in img tags using asset()?
Example:
<img src="images/image.jpg"/>...
To:
<img src="https://.../images.jpg"/>
I want solution which would cover all bases: spaces in image name, different extensions...
Sure, just use the curly brace syntax in your blade to render the asset()
<img src="{{ asset('whatever_you_want') }}"/>
I don't think you can do it in Blade. You could, in your model, add a function that replaces all images to full paths. This could be done through a regex pattern that looks for URLs in tags.
I would, however, make sure the full path to the image is included in the text in the database. This way, you always have access to the right path to the image, and you're not relying on a piece of code to display the right image.
How can I insert an image in a markdown section in lektor. In particular, does the url filter work inside markdown, or who else to I reference the image location inside assets/static/?
Most of the time in the admin site, you want to embed a file listed on the "Attachments" list on the left. To do that, simply use the attachment filename, as in :
Use the standard markdown for the inserting images. For the image named my-image.jpg stored in the assets/static/ use the following markdown code:
<!-- 1) Inserts an image with an empty alt parameter, but better to use the 2nd or the 3rd example -->
<!-- 2) Inserts an image also with the text "fancy picture" as the alt parameter value -->
<!-- 3) Image also has the title attribute -->
The snippet above will generate resulting HTML:
<img src="../static/my-image.jpg" alt="">
<img src="../static/my-image.jpg" alt="fancy picture">
<img src="../static/my-image.jpg" alt="fancy picture" title="Title of the fancy picture">
I tested this snippet on my example website and it works perfectly.
Please note the / before static in the markdown code.
I have SVG image file with several nodes each is associated with URL. If I open this file directly in browser I can click on each node and it will open different URLs. However when I use this picture in my Sphinx documentation it doesn't work - picture rendered as a whole so I need to open it by View Image and only then I can click on nodes.
I'm using standard image directive:
.. image:: myfile.svg
Probably I need to use something else?
Sphinx generates <img> tags for images, which makes sense in most cases. However, to have the links inside the svg be clickable, you should use an <object> tag, i.e.:
.. raw:: html
<object data="myfile.svg" type="image/svg+xml"></object>
(Regarding the GitHub issue you linked to, I don't think there's a lot that Sphinx can do here—it's really quite complicated—short of introducing a new option to the .. image directive that lets the user specify whether to render as an img or object tag.)
One simple solution would be to add a link to the svg file in this .. image:: myfile.svg command:
.. image:: myfile.svg
:target: _images/myfile.svg
Take care of checking the relative directory where the images are copied when the html files are generated. By default, it should be _images/.
This way, you can click the SVG file, to see it in a plain page, and then click on it as usual (not a perfect solution but still..).
I am probably misunderstanding the OP's requirements, but why not just include the SVG into the sphinx documentation as html? This appears to work for me:
.. raw:: html
:file: images/image.svg
To include clickable svg links within sphinx I did the following:
.. raw:: html
:file: ../graphs/pymedphys_analysis.gamma.svg
See:
https://raw.githubusercontent.com/pymedphys/pymedphys/1915b9496e93782bdac7dcebff7e26e470e5ff57/docs/graphs/graphs.rst
This then freed me to write the following within an imported style sheet:
svg {
width: 100%;
}
https://github.com/pymedphys/pymedphys/blob/f4d404fa1cf3f551c4aa80ef27438f418c61a436/docs/_static/style.css
This made the svg fit the container as desired.
See:
https://pymedphys.com/developer/dependencies.html#pymedphys
I like this way
.. raw:: html
<a href="https://www.google.com/">
<img src="https://img.shields.io/static/v1?&style=plastic&logo=appveyor&label=Google&message=link2google&color=FF0000" alt="No message"/></a>
I'm still looking for a better solution myself, but I ran into the same problem and used this workaround.
You can use the download directive to give the user a link to the file.
:download:`svg <images/image.svg>`
I have a small question. I am using prestashop, and would like to add image in my footer. I am trying to add img tag in footer.tpl
<img src="/htdocs/themes/warehouse/img/logo_btm.png" alt="logo" />
but instead of picture i have question mark.
you use relative path
instead of relative path use full url to your image like
http://domain.com/link/to/image.jpg
You have to use smarty global var, put the image in your theme's image folder and use this syntax
<img src="{$img_dir}logo_btm.png" alt="logo" />