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
Related
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.
I put my website on github pages following this website and it works fine. The problem is that when I put it online, four images of the homepage are not shown whereas locally yes.
The code I use for displaying it is
<img src="img/prototyping.png" class="img-responsive" alt="">
the source is here
The dimension is 521 x 521 for 180 KB.
I tried to put another picture that is on the homepage and another random picture and it shows up...
I looked up the console of each browser but no info about it.
Do you have an idea of any possible solution of it?
I finally solved it:
The problem was that the image was not exported in png from photoshop but only "Save as", html didn't like that. In order to export it in png format in photoshop I did File -> Export -> Quick export as PNG.
Thanks
I have an iOS app that contains a UIWebView, which display a webpage. Sometimes the page displays a different image than the one associated with the src link.
A user sent me a screenshot where it was clear that one of the icon images had been replaced with a completely different image. The same wrong image was displayed in each of the instances where this icon was supposed to be displayed. Refreshing did not solve the issue, but closing and opening the app did. (Or maybe she actually deleted and reinstalled the app.)
The html for the icon is just an img:
<img src = "/the_icon_source">
The img src is hardcoded directly into the HTML file. I therefore don't see that the HTML itself could have been wrong or said anything besides "/the_icon_source".
So how can the wrong image be associated with an image src? Could the server be sending the wrong image when it's asked for "/the_icon_source"? Could the iOS app be caching incorrectly, mixing up images? How to test and fix?
I myself cannot reproduce this issue. I'm not sure how often it occurs, but several users have mentioned it, also for other images on the page. They have only mentioned it occurring in the app, not on the website. This may just be because the app is used more than the website.
My host is Webfaction and the images are served using WebFaction server’s static-only front-end nginx process. The app displays the website in a UIWebView. (Webfaction suppprt merely told me that they served the right images.)
Is the problem not that you have it like this:
img src = "/the_icon_source"
rather than like this:
img src = ".the_icon_source"
If this is sat on a linux server the / will be pointing to the root directory whereas the . or simply the_icon_source would simply point to the directory in which the website is sat which i assume is where the image is also located.
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
I am wondering how to prevent people from Save image as.. by right-click images on my webpages.
I was thinking about disable right-click, but it seems I have to write javascript code. Is there a easy way to do this?
The simple answer is "you cannot do that". You might be able to put something on the server side that will check the referer before serving the image, but even that is not 100% guaranteed. Moreover, even if you did manage somehow to prevent this, nothing would prevent somebody from taking a screenshot of the browser page and then cropping the image out of it.
I think a much better approach would be to have a server-side url rewriting and processing of the images to add some sort of a visible watermark identifying the images as owned by you and saving a proper copyright information in the EXIF information.
You can make a div that is the same size and height as the image and then you can set the image as the background for that div. That will prevent people from directly downloading the image but they can still enter the url and download it from there. I made a tutorial on this myself right here: http://www.andytechguy.com/tutorials/html/how_to_nodownload/
There's an easy solution for this which I used in my website. Just add oncontextmenu="return false;" attribute to the Image tag and you are done with it!
<img src="https://source.unsplash.com/random" alt="Random image" oncontextmenu="return false;">
This is my first question to be answered on stackoverflow, so please fair with me if I didn't use the right tools...
As long as the image URL is in the source code, the image is downloadable using the unix command wget, or anything similar. I'm not a javascript expert however, but I believe you could read the location of the photo from a text file instead of the URL being hard coded in the HTML. Then you could configure that text file to return a 403 (Permission denied) when attempted to view with whatever web server you are using. This still wouldn't stop screenshots though.
Something like this:
<img src="some javascript to read text file">
Then have the text file contain:
/path/to/obscurely/named/photo.png
Ya, this isn't really possible. Another option is to use Lightroom or something else to batch add watermarks. Watermarks are the only option that I'm aware of that will almost completely protect you, because even the screenshot idea is not really possible unless they are a wizard in Photoshop.
In conclusion I think Lightroom or something else is your best and easiest shot of getting what your looking for.
You can do this by converting the image format from jpg to svg...there are alot of converters online i.e https://convertio.co/jpg-svg/
After this you copy and paste the svg code into your html code to replace the jpg.