I am trying to get an image to display on a webpage through the ktor HTML DSL. The image won't appear, and the alt is showing.
I am currently using the IDE Intellij, and I can't think of where to put the image. I tried putting it in the src folder where the .kt file is, but it is still not seeing it.
img (src: "This is a picture!!", alt: "/img/picture.jpg")
Here is a source I used: https://github.com/celtric/kotlin-html/blob/master/README.md
The image is supposed to show but the alt shows instead.
You have to put it in your resources folder.
The src folder is for code to be compiled.
The resources folder should be in src/main/.
Furthermore, you need to tell ktor to serve static files in your routing.
See the official documentation:
https://ktor.io/servers/features/static-content.html
Also, here is an example including the img tag: https://ktor.io/samples/feature/static.html
Also, take a look at my previous answer for more details regarding static content routing in ktor: https://stackoverflow.com/a/50965188/5335131
I'm writing a theme using Diazo using the theme editor of plone.app.theming in Plone 4.3.6. I added a image image.png in the theme folder so it is accessible at http://localhost:8080/mysite/++theme++mytheme-theme/image.png when I'm developing the theme in my computer. I want to refer this image in the template HTML file with <img src="path/image.png">. However it is not clear what to put instead of path. I notice that path cannot be an absolute path because it depends of the site domain. Also, it cannot be a relative path because it depends on the path of each page in the site. May be it would be useful to have an specific keyword to reference the theme folder. For example, <img src="$themeFolder/image.png">. Exists such keyword?
If the HTML file is in your Diazo theme, you can use a relative path from the file, like "images/image.png". Diazo will correctly interpret it.
You can also use "++theme++mytheme-theme/image.png", as Acquisition would locate the image.
I am trying to add an image to the README.md in my repository using markdown below:
But the image is not showing when I visit my repository.
Instead the link to the image is showing up. Clicking the link will open the image in new window.
I have also tried using relative path:
But this is giving page not found error.
What is the correct markdown to display image in README.md
Both README.md and image file are in same path/directory.
What is the correct way to display an image in github README.md?
Complete content of README.md file is as below:
Voice-controlled-MP3-Player
===========================
A MP3 player which accept voice command like PLAY, PAUSE, FORWARD, etc. Using C# and Microsoft Speech API.
Updated content
Since January, 30th 2013, GitHub now supports relative links in markup documents.
This means that your code  would now work flawlessly.
As pointed by #Brad, this may also ease a scenario where the images are different in two branches, but bear the same. In that case, switching from one branch to another, would dynamically switch the image in the rendered view, thus without requiring any change to the Readme content.
Blog post announcement
Help article
Previous answer when GitHub wasn't supporting relative links
You have to use the raw url format. In your case that would be https://raw.githubusercontent.com/i-saumitra/Voice-controlled-MP3-Player/master/screenshot.jpg
This means that the correct markdown would be the following
Using this in a .mdfile on github will display the following picture ;-)
Update following your comment
where is this officialy documented that we have to use raw...i couldn't find it anywhere
This URL format is an undocumented feature of the GitHub site. This means that it could change later. If that ever happens, in order to "rediscover" the new format, click the Raw button when displaying a image. This will "open" the image in your browser. Copy the URL and Voilà!
Note: Although the repository is no longer on hosted on GitHub, I've updated the urls to reflect the new GitHub policy regarding user content
You really should use relative urls. That way they'll work better for private repos as well.
supposing your repo has latest.png inside the screenshots folder.
~B
For relative URL's to work with images, wrap it inside the paragraph tag.
I was facing the problem, especially when working with the single image.
Example:
<p>
<img src="relativePath/file.png" width="220" height="240" />
</p>
An extension to previous answers...
The image would not show for me when the line:
Was directly below a <h2></h2> line and I needed to add an empty line between them.
Hopefully this saves someone some time!
Thought I would update this for 2019 as I had trouble figuring this out for myself. I uploaded my images to a repo on GitHub, and then used the raw url of the image to import it into my markdown file. To get the raw url, click on the specific image link in GitHub so you are on the page for that specific image. To the top right of the photo, there are two buttons, "Download" and "History". If you click "Download", it takes you to that raw url with the picture taking up the full screen. Copy that url, and then paste it like this in your markdown file:
The button used to say "Raw" not "Download" so I hope this helps people find it.
This may not be relevant to previous answers. I have the same question as the OP - I was directed here and it didnt help me. I hope I can help add light to this question however - as it covers the possibilities of why images does not render in README.md file.
The issue I encountered is that the file name README.md file is written as readME
Not only its missing .md its also written differently.
Apparently, we should not rename the README.md file. It has to be the original name of that file in order to render the images or gifs you want to upload on github README.md page. Hope this helps someone, in rare of occasions, just like I did.
Check the file extensions because .png is not the same as .PNG.
Also use / instead of \ while specifying the file path.
Side note, when using reStructuredText use:
.. image:: /screenshots/latest.png?raw=true
I've tested with "Copy path" and in some locations this was working and in others it didn't.
In the cases it didn't, I copied the permalink and used it instead.
It doesn;t work when there are any html tags just above the line where image is being imported. You can try removing the html code or add some blank lines for the image to show on Readme.
This is just to help someone who is still having issues with image rendering in README.md:
If your image is named Some Name.png and you are trying to attach it in the README.md like , it won't work. The image has to be saved without any spaces in the file name.
So Some_Name.png with  will work.
Make sure you check the case of the file extension. They have to match (either capital or lowercase). If you have my_image.PNG in your root directory and you add  to your README file, it will not work. For some reason, Windows likes to capitalize file extensions sometimes. Unfortunately, Git does not recognize extension case so if you try to fix it by just changing the file name, you won't be able to commit the changes to the repo since Git will think everything is up to date. So you either have to update README.md or do some workaround like moving the file out of the directory, making a commit, then editing the file name then moving it back and doing another commit.
I had to add a <br> to return a line in order for the image to show on mine. This discovery was inspired by the comment in this thread to leave a blank line after a tag.
I'm setting up a site and I've run into a problem:
I've modified the component.php file in order to customize the printing of an article. Unfortunately i discovered that phocagallery uses the same file to display pictures.
Is it possible to indicate a file different from component.php as template view for phocagallery images?
That template file is what controls the look/output of ALL components. You're better off doing a template override for whatever component (like com_content) or doing this to customize the print view.
If I want to show an image in my sidebar. How can I do that? I tried to do the following to no avail:
According to this: https://developer.mozilla.org/en/XUL_Tutorial/Adding_Labels_and_Images
If I add this code into my ff-sidebar.xul file:
XUL:
<image id="image1"/>
Style Sheet:
#image1 {
list-style-image: url("chrome://findfile/skin/banner.jpg");
}
The Image should be displayed. Did I pick the wrong file?
best, US
That's an example if your extension is registered in chrome with findfile:
These images come from within the chrome directory, in the skin for the findfile package.Because images vary by theme, you would usually place images in the skin directory.
And in introduction to the tutorial it says:
This tutorial will demonstrate
creating a simple find file user
interface, much like that provided by
the Macintosh's Sherlock or the find
file dialog in Windows.
So that example is in the context of the tutorial.
You need to provide it an image in your skins folder and in css use:
list-style-image: url("chrome://yourext/skin/yourfilename.jpg");