Three Common Problems when Working with Images
Three Common Problems when Working with Images
These are the three most common mistakes made by new web developers when working with images on their web page.
demo file: https://www.sixminutessmarter.com/dem…
Content
0 -> Hey, this is ralph and in this video i
1.89 -> want to go over three common problems
3.629 -> that can occur when you're first working
5.43 -> with images.
7.1 -> [intro music]
14.92 -> When you first start making your
18.36 -> webpages you'll be putting images in
20.369 -> pretty soon and there's a number of
22.74 -> problems that usually affect beginner
25.2 -> webpage developers so i'm going to go
27.239 -> over those three key problem so you know
28.89 -> to look for them.
29.91 -> I'm gonna use a little
30.899 -> definition list here in order to keep
33.78 -> track of these three. Use a set of DL tags
38.309 -> I'll put in my first
39.84 -> problem using a DT definition term and
42.78 -> basically the first one is your image is
46.38 -> not stored in the same folder as the
51.42 -> webpage or in a subfolder of the webpage
57.18 -> and now for my image source equals and
65.25 -> my image path that I know it's in my
67.47 -> images folder photos folder and the 1i
70.11 -> want to use is not one dot jpg and i'll
73.59 -> just do an empty alt. OK. So before I
78.6 -> turned on the recorder i went and found
80.1 -> a few images from Flickr under the creative
82.079 -> commons license and I saved them
84.96 -> I think I saved them to the proper spot
87.21 -> so I want to refer to this first image
89.939 -> on my webpage i'm gonna go ahead and
91.319 -> save this jump back over to my browser
93.03 -> and refresh and of course i'm getting
95.46 -> the tell-tale broken image even though i
97.77 -> feel so certain that i saved it
99.24 -> appropriately
100.139 -> well what happened was with this first
102.689 -> image mountain one I didn't save it into
106.079 -> my photos folder like I thought I
107.88 -> accidentally saved it to the desktop so
110.249 -> it's actually stored on the desktop of
111.899 -> my computer
113.84 -> I need to take this mountain one picture
116.57 -> put it into my sub folder so basically
120.649 -> the webpage and I'm working on is in my
122.329 -> demos files folder the image that I want
125 -> to display is in a subfolder of that
127.369 -> images of folder photos of folder so
129.5 -> it's right there
130.429 -> so the image i'm using for this web page
132.26 -> needs to be within the domain of the
136.28 -> webpage that you're working on
137.81 -> ok so the pictures need to be there
139.7 -> early on you can just put your picture
141.86 -> files let me go back in there you could
145.88 -> put your image files right in with your
147.56 -> HTML and then once you're comfortable
149.39 -> with working with those then you can
150.98 -> start using sub folders to keep
153.26 -> track of those images but now that it's
156.44 -> in the right spot as a quick little
158.329 -> refresh is going to get that picture
160.01 -> showing up and there we go so now that
162.98 -> images showing now the next common
166.97 -> mistake that I'd like to give you an
168.829 -> example of. I'll close out that DD
172.04 -> and do another DT. The image path or file name
178.94 -> is typed incorrectly and I'm just going
184.79 -> to go ahead and do another image in here
186.29 -> happen to have another image already
188.78 -> saved up (mountain2) but this time
191.93 -> I'm gonna make a little bit of mistake i
193.67 -> could put a space in the file name and
196.22 -> by putting a space in the filename i'm
199.459 -> going to have a broken image or if I
202.639 -> referenced the wrong path but the
206.51 -> correct image filename of course that
209.359 -> breaks also so there's a number of
211.579 -> different ways you can mess up here but
214.31 -> you just need to make sure that your
217.099 -> file name for your image is spelled
219.53 -> correctly and it references the
221.239 -> appropriate path for where that image
223.4 -> truly is my little trick for all my
226.7 -> images all lowercase no spaces and so
229.79 -> that way you don't have to guess later
231.079 -> on
231.859 -> did I use capital or space in there
234.169 -> anything like that
235.19 -> go ahead and save this and back on the
236.69 -> browser refresh now everything's working
239.54 -> ok and the last relatively common
242.75 -> mistake is pretty easy
244.91 -> the image was not properly published to
252.83 -> the web
254.78 -> okay and last but not least let me throw
257.36 -> in my image 3 mountain three here and of
262.46 -> course it's working fine locally my
266.06 -> image 3 is showing up just as i expect
268.31 -> so I'm ready to publish to the web and
269.81 -> see how things are looking so I go to my
271.91 -> ftp application and let's see let me
279.59 -> just do a quick little refresh here
282.17 -> upload my image problems file going to
289.76 -> my images folder my photos folder images
294.71 -> and photos i'll take just gonna grab my
300.92 -> first two at first mountain1 and
303.68 -> mountain2 so that when i look at this
305.81 -> web page online
308.51 -> there we go but this is the common
310.97 -> problem so generally the tip off is if
315.14 -> your image was working fine on the local
317.12 -> version of the webpage but then it
318.95 -> doesn't work for the online version then
321.56 -> you know that it was generally a
322.76 -> publishing mistake and it could be as
324.83 -> obvious is you just forgot to publish
326.87 -> the image file but it could also be that
329.03 -> you published it into the wrong spot
331.07 -> what if i accidentally published my my
333.2 -> image into this other sub folder or
336.41 -> sometimes you might accidentally publish
339.05 -> your image into let's say the root
341.66 -> folder along where you keep all of your
343.19 -> HTML files
344.63 -> neither of those Publishing's
346.76 -> are going to work because they're in the
348.23 -> wrong area so my path is incorrect
350.84 -> so when you publish you need to make
352.61 -> sure you know where your images are
354.83 -> going if I put my images all in the
357.14 -> appropriate folder to now all three of
359.45 -> my Mountain pictures are in my
360.71 -> appropriate photos folder then online
363.02 -> they are going to work so these are the
365.75 -> three most common problems with images
367.88 -> make sure you don't make these mistakes
369.2 -> or if you do make the mistakes you
371.93 -> recover quickly
Source: https://www.youtube.com/watch?v=TX1CcM0CMQw