I'm using Gulp as a task runner.
Here I try to use BEM methodology.
All my BEM blocks are in 'library.blocks'.
In each of my blocks there's an html file that being included into index.html (it's done by using gulp-file-include plugin).
So in button.html I type <img src='img/228.jpg'>.
Then we include this button.html into index.html and now we have index.html with this <img src='img/228.jpg'> line.
All my images after build go to /dist folder and the structure looks like this:
At the beginning I just wanted to output all my images from /src just to /dist/img.
Then I thought about name collisions. What if we have two 228.jpg in two different blocks.
I thought it'll be okay to make structure like this: /dist/img/blockName/228.jpg.
What do we have now? In index.html there's the line <img src='img/228.jpg'>. But paths changed and now it just doesn't work. What should I do to solve this problem?
One issue I can see is that Gulp is converting images to webp, so you should be referencing them in that manner in your source according to your dist output. For example, judging by the second file structure you noted, to access 228.webp from index.html, which is the converted 228.jpg, you would use the following:
<img src="img/button/228.webp">
Related
web page with my uploaded image here
I was trying to find the path my computer was using. I tried the basic code that
I learned in a program I'm currently in, but it didn't seem to work. The path is desktop/my-skillcrush-project/101-skillcrush-project-images/images-icons/html-icon.png
The program directed to download the zip file of the image on my computer and create a folder. With the root directory associated with the file including the image.Then to use this code. <img src="img/html-icon.png" alt="HTML icon"/ (closing tag disappears when I try to type it. Sorry, it's in my code.) and that was it. It seems too simple in my opinion. How should the files be saved so that it will show up??????
What is wrong
The problem is, in the src, you put a relative path. In HTML, a relative path is a path without a slash(/) at the beginning. So, HTML was expecting a folder called desktop in the 101-skillcrush-project-code folder which had all of the other folders and the image.
What you should do
You do not need to put the full(absolute) path for the image. You can put the relative path. That is, relative to where the index.html is located.
Solution
So, in the src of the image, you can put 101-skillcrush-project-images/image-icons/HTML Icon.png.
More Info
HTML File Paths on W3 Schools
HTML File Paths on GeeksforGeeks
It definitely is much easier if you make a clear structure for all of your html assets. That also makes it much easier to handle your paths. So for example start with a root folder - lets name it html, where you put all your html pages in. Inside html create a sub folder for e.g. for your images and css. Folder structure can look like that:
/html image path from html folder: <img src="img/html-icon.png">
|- img save "html-icon.png" here
|- css
|- js
|- fonts
|- etc
To access an image from another folder e.g. css folder, you first have to go one level up with .. and then, go into the img folder. e.g. <img src="../img/html-icon.png">
If you have your images somewhere outside your "web folder" the paths can get a pain. So just organize your assets - it is much more effective and much easier for you to find and work with it.
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.
Okay so let's assume, for simplicity's sake that my folder structure looks like this:
project
- index.html
- css
- style.css
- scss
- style.scss
- img
- image.jpg
I want to use my image.jpg as a background for a div. I am working from style.scss and then monitoring the scss to css in style.css. If I use the path ../../img/image.jpg it will be displayed as correct in style.scss, but since I am monitoring this to style.css, the image will not be displayed because the path to the image from style.css is ../img/image.jpg. This goes both ways, If I use the path ../img/image.jpg the image should not be displayed because the path is incorrect for style.scss. How can I make this work?
I'd personnally set the images url to fit the style.css needs.
In my point of view, style.scss is here only to provide more flexibility during the coding of your design. This way, i never use .scss files inside my HTML.
Taking the in mind that i always compile the .scss into .css, that makes no sense to me to set the path from the .scss file.
By the way, i know there are tools allowing to auto-compile .scss files before returning them compile from the server, but i'm not pretty fan of this solution, because more than requesting a file in HTTP GET, you'll need your server to compile code before returning it, so it'll obviously take a bit more time...
One of the possible solutions for that to use absolute path to your images, I mean, like:
/img/image.jpg
therefore you will still have autocomplete in IDE
and css will be transpiled correctly
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=""
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.