Background image not applying on codepen - image

I am having a problem with my background image on codepen not showing up. It was fine at first and then one day the background just showed up as white.
Here is the link to my codepen (https://codepen.io/Dylanidas/pen/QgOPdQ). I've tried setting the image inline with the body tag of the HTML, I've tried using http and https for the image link. I've also tried hosting the image on imgur, google photos, and dropbox to no avail. I was thinking it might have been a problem with the hosting sites but nothing I do seems to work. Also I have already looked at the past posts about this question and those didn't help.

I figured it out, I had to use the absolute path from Imgur. It is labeled direct link as opposed to absolute path.

Related

Images not showing in codepen

I have a code which I need to share so I pasted in from Visual Studio Code into code pen and replace all my image links with imgur links but when I save the code on codepen it doesn't show up.
I've tried uploading to different picture sharing websites but none of them seems to work or sometimes they just dissapear
<img src="https://images.app.goo.gl/PH9vzQEL6deb152b7" alt="logo">
This is a simple code i used but the image just refuses to appear.
I just need to image to show up, if there is any way to share my website without publishing it to the web I would like to be informed about it too. Thanks you.
this is a website that get your image and give you base64 of it and you can put this base64 thing in your src attribute of img element and you are good to go

images not appearing online but appears offline. I am uploading via Filezilla

I am uploading my website using Filezilla, and some images are not appearing. I have checked that the file names are all lower case and that the file type is set to auto instead of ASCII. I have cleared the cache too and I am still not seeing the same images not appearing.
I have got a 403 and 404 error on these images in the console, please see screenshot image for this.error image
All images work fine when testing locally on my computer but some random images are not appearing. Anyone any ideas why this could be?
Thanks!
image not appearing
Could you maybe provide some code with examples?
It could e.g be that the path on the server is different. If you use absolute paths it may work on your host where the homepage is under /. But if it is under /user/ or something similar (so not in the root), the paths can be broken and images will not appear. So check if you provide the paths differently for the pictures that work as opposed to the ones which fail.

LinkedIn Share API not displaying large image thumbnails anymore

I've been using a plugin called Microblog Poster on my hosted Wordpress site to auto-publish blog entries to LinkedIn, Facebook, Twitter, etc.
I have made no changes to the plugin, the plugin hasn't updated, basically everything has been the exact same. However, within the past 5 days, LinkedIn has stopped displaying the shared image as a large image, when it has been consistently sharing it as a large image before.
It will share the image, but it's now a thumbnail, showing approx 140px x 70px to the left of the shared link's title. Normally, it should show as a large, 525px x 275px image above the shared link's title.
Again, no changes have been made to the plugin, my process, or anything. Facebook and Twitter are still displaying normally. I've even done several tests with different posts to confirm it was not a fluke.
Would love any thoughts on how to fix this, or if anyone else is having this issue.
Take a look at the The Open Graph protocol. You have the option to set the size of your image, as they show in their demo. You already know about the og:image property, but what about og:image:width and og:image:height? Check it out...
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
This will show a preview of your image in a standard 400x300 format. This should work, because LinkedIn says they read og: tags in determining share previews, according to the official documentation. Although they don't mention :width and :height, I hope they would respect these tags, too, because they are part of the Open Graph Protocol. Hope this helps!

images not loading in Internet Explorer. why?

ive been finally polishing off a website i was building but to my dismay i recently checked the website in Internet Explorer and found the images weren't loading fully.. you can see can the borders for the image but nothing loads in between. i thought it might something i altered on wordpress, but the main page has images from from non wordpress html files and they don't load either.. everything works fine on every other browser except Internet Explorer.. any ideas why? probably a simple fix
here's the website.. . all the code and css is viewable there, if you want my wordpress code let me know
maybe the code just needs to rearranged to make window browsers happy?
any help would be great
Looking at the source for the shop.html, it looks like you are specifying the height of the images, but not the width. Opera, and Firefox are ignoring the width="" and using the default width, but IE is setting it to width="1." I don't know how to change this in Wordpress but if you remove the width="" or add a value it will show correct.
You can see this if you r-click the image line in IE and select properties: it shows as 1X290px.
img src="images/shop/julianduron.jpg" width="" height="290"
hope this helps

CakePHP is interrupting images

I am using fckEditor as text editor. When i upload images thru it the images were uploaded to app/webroot/fckeditor/images.
And when they're embedded it looks like
/fckfiles/SalmonSashimi.jpg
Until now it looks right.
But the image doesn't appear.
So when I browse the image directly, at here
http://www.in-culture.info/fckfiles/SalmonSashimi.jpg
instead of displaying the URL, Cake interrupts the image call and trying to render it in a layout. I often face this error when I point .html file for iframe scroller and .xml file for flash embedding. This is really embarrassing
You can see the page here
http://www.in-culture.info/events/view/42
That image should appear before the text - "More" dont appear for short text.
Thanks for you help.
Try to change the path where the images are saved. Instead of
/app/webroot/fckeditor/images
try to change to
/app/webroot/img/fckeditor/
I believe that it's possible.
It's resolved now.
It was not cake's fault.
I pointed incomplete absolute path at FckEditor so it didn't upload the files well.
However the uploader mistakenly passes the "OK" so the HTML tries to display it.
So cake tries to render something, as usual, when there is no physical file.
I spent about 10 hours to resolve this.
Now I don't hate cake as I did a few hours ago. (: :)

Resources