I have the index.html file, where iside I put CSS as inline style. I'd also have inside links to images, not to path to images. Finally, I'd like to have index.html file which will contains evrything inside as one file. How can I make not to get images from computer path but have a links to my images?
Thanks for help!
If I understand you correctly, you are seeking to build one huge file "index.html" which contains all the information needed to display what you want to display.
Think that this is something extremely unusual. Why would you need that? Probably there are better ways to achieve what you want to achieve.
If you really want to go for it, ideas that come to mind are:
* use simple graphics in form of .SVG images, these can be described with the HTML SVG tag
* use compiled HTML (.CHM) (https://en.wikipedia.org/wiki/Microsoft_Compiled_HTML_Help) - but not for the web...
when u want to call image from outside then call like below when you use http in url it will never look for local file path
<img src="http://www.domainname.com/yourimage.png" alt="image">
You can make a folder like images where is your index.html then put your all images in images folder & link your images like this
<img src="images/logo.png" />
This is folder path not from your computer, When you will upload it then this path will be automatically global
or you can use direct link from server like this:
<img src="https://www.example.com/logo.png" />
The best way would be to include all files relationally in a /images folder however if you need a one file solution then you could encode the images in base64 and use that in the src=""
Related
Alright, so I have been attempting to get an image to display in one of my subpages in HTML. I am sure that this is a very simple and stupid issue in regards to how I am referencing the image in the code. The image file is called crab.jpg and it is inside the pics folder which is all contained in the Websites folder. I have no problems with similar code displaying images within the index file which is the main page for the website.
<img src="Websites/pics/crab.jpg"
width="400"
height="400"/>
Not sure if this will work, unless it's in a subfolder. But try adding /
before the Websites
if that doesn't work try ../
and if that doesn't work try ../../
I have an html file in which I would like to display an image called plot.png with the line <img src="plot.png" alt="Stock price vs. predictions graph">. On my website, I only see the alt text, meaning that my image did not load properly. In my command prompt output I see that I have a get request to /mysite/home/AAPL/plot.png, which is extremely frustrating because this means that when I search for the image this code is just placing it in the url (which is localhost../mysite/home/AAPL). I have tried putting plot.png in the same working directory as my html file as well as trying the absolute path to plot.png starting with C:, but nothing seems to get the search out of the url. Please help, thanks!
If it helps, im using Django
You can put the image in the same working directory (in the same folder as your html file) and then use
<img src="./plot.png" alt="Stock price vs. predictions graph">
The "./" is important as it signals that the image is in the current folder.
You could also use a website like www.linkpicture.com to generate a link to host your image and then use that link in your img
Some web browsers automatically disable images from loading. Fixing this could be as simple as selecting “show all images” from the browser's settings menu. It's also worth checking if the device you're using has security software or extensions that could block images.
Again you can use this tag for .png type photo
<img src="exampel.end">
//use extension type .end instead of .png
I forgot to mention that I was using the Django framework and the html templates work much differently than regular html files do. In Django you must put the image in a static folder and then call if with Jinja like so: <img src="{% static 'mysite/image.PNG' %}">
I have an Angular Application with the following structure:
Structure
As you can see, there is a backend directory (yellow marked) in which other directories exist, such that the following path is valid: backend/uploads/users/user123/unnamed.jpg.
Now I want to use that image in my app.component.html
<img src="">
I tried to put the path in the src-property in different ways but the image is not appearing. How would the src has to look like to use that image in my Angular project?
I guess you are using the angular CLI. Therefore you should put the image in the assets folder. Try again than and it will work.
Like this:
<img src="/assets/images/unnamed.jpg">
EDIT: I am sorry, did miss out that part. You need to edit the angular.json file for this. Add the path of the backup folder there to the assets. But the backup folder must be in the src folder for this to work. Thats my suggestion for a solution.
So you will be adding "src/backup"
I don't think what you want to do is actually feasible. if you want to use an image in an Angular app, it's either an asset and you put it in the assets folder, or it's a resource coming from your backend and you will have to write a proper mechanism to expose the wanted resource, and then use it in your Angular app.
I cant seem to get my image to display on my webpage using a relative path. Im using the program "brackets" to do all of my editing before uploading to the webpage. Below is the relative path that i'm using and when I hover over the path the image thumbnail displays. but it still wont display on the page... am I missing anything? please and thank you.
<img id="01" class ="tn leftcol" width = "150" height = "150"
src=".//Images/IMG_3604.JPG" alt="1" />
there are two slashes. this can be interpreted as a protocol. Change the src to Images/IMG_3604.JPG
If this is being populated via a variable, check the source text or environments
There are two forward slashes. It should be ./Images/xxxxx.png not .//
If you have to go out of a directory, use ../ if the image folder is in the folder you are currently in use nothing.
Src="Images/IMG_3604.JPG"
Your html file is in the same directory.
Src="../Images/IMG_3604.JPG"
Html file is in a subdirectory and you need to go outside of that folder to get to images.
Src="../../Images/IMG_3604.JPG"
Html is in a subdirectory of a subdirectory and you need to go outside of both to get to the Images folder.
Hope this helps.
Really basic question, some advise would be great please.
All of my web images and CSS are of course organised in my root. I then have a catalogue folder, which branches out into 3-4 deeper sub categories. In my HTML its becoming a bit messy sourcing my images/css because I'm using a lot of:
../
<img src="../../../images/myimage.png" style="width:200px; height:auto;">
What do you guys recommend? Do you do this? Or should I sort my images relevant to that file into their sub categories? Thanks, as always.
C:\Users\sam\Desktop\webroot\catalogue\folder1\folder2\folder3
You can use base for this see MDN
The HTML element specifies the base URL to use for all relative URLs contained within a document. There can be only one element in a document.
For example if your folder structure is like yourdomain/images set
<base href="yourdomain"/>
This is the correct method of doing it. Rather than sorting images in relevant folder you can keep it in the separate folder only as you did.
There is a way of minimizing this no of times of ../
Don't assign the src directly in line of the tag.
Always prefer separate css file or javascript file to do that.
You can put all your css files in one folder and you can keep that folder nearer to your images folder.
So that you can use only one ../. it'll look like ../images/yourimage.png
Suppose your html file's location is like
\1\2\3\4\5\6\7\8\sample.html
And your image files are in \1\images\
you can place all the javascript files in a folder which is nearer to the images folder like this \1\scripts\
Now suppose in your sample.html file there were lot of image tags like below
<img height="200" width="200" class="nature"/>
<img height="200" width="200" class="nature"/>
<img height="200" width="200" class="nature"/>
you can just import the javascript file like this
<script src="../../../../../../../../scripts/myscripts.js"></script>
Note: this is the only place you are going to use lengthy ../
In myscripts.js file you can simply use
$(".nature").attr("src","../images/yourimage.png");
Similarly you can do this for the rest of the tags also.
So in that `javascript you need not to use lengthy locations.
You may have 100s of img tags. you can simply import this js file only one time and use it.