问题
I want to add attribute to image tag in order to reference from JavaScript library as below.
<img src="img/sample.png" data-action="zoom">
However, I only can add alt, width, height as I know as below as outcome from Pelican.
<img alt="thumbnail" height="250px" src="/images/mech2.jpg">
回答1:
If you're using a Markdown (.md
) file to create your article, then you can literally just include an image element with any attributes you like:
![This image is in Markdown format]({filename}/images/foo.png)
<img alt="This one is just a literal element" src="{filename}/images/bar.png" data-action="zoom" >
Would become:
<p><img alt="This image is in Markdown format" src="../images/foo.png"></p>
<p><img alt="This one is just a literal element" src="../images/bar.png" data-action="zoom"></p>
For reStructuredText (.rst
) articles, you can't do this; per the documentation only a limited set of image options are supported*, and if you just try and include HTML inline it gets rendered out as-is:
.. image:: {filename}/images/foo.png
:alt: this is an RST image directive
<img alt="This one is just a literal element" src="{filename}/images/bar.png" data-action="zoom">
Becomes:
<img alt="this is an RST image directive" src="../../../images/foo.png">
<p><img alt="This one is just a literal element" src="{filename}/images/bar.png" data-action="zoom"></p>
* Specifically: alt
, height
, width
, scale
, align
, target
, class
and name
.
来源:https://stackoverflow.com/questions/43819422/how-i-can-add-attribute-to-img-tag-in-pelican