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. (: :)
Related
We have encountered multiple corrupted Instagram Standard Images (612px).
This happens the last 3-4 days. And across multiple Instagram users.
Strangely this issue is only evident when the images are opened using Adobe Photoshop.
When viewed using Mac's finder or Preview this image corrupt problem is not visible.
It affects about 50% of our customers. And mostly about 10-20% of their choosen images. And some can affect around 50-100% of their images.
Example of corrupted images:
http://distilleryimage10.s3.amazonaws.com/5875aa2eb24411e3bfe2124c49cf34ce_8.jpg
http://distilleryimage0.s3.amazonaws.com/3b3452a8b24411e3b352126f9f588c64_8.jpg
Again, this issue is only evident when the photos are being prepared to print.
Or when it is opened using Adobe Photoshop/Acrobat/Illustrator/Indesign.
Please help.
Thanks
Jeff
I managed to solve my issue with the same description. What I first did was download the images to my webserver exactly to what is was online, so I didn't change anything of the file contents, just get en then put in the file.
How I solved my problem? I use PHP to generate the image now after I donwloaded it the same way. This is the simplified version of my script:
<?php
// Create an image instance
$im = imagecreatefromjpeg('instagram_image.jpeg');
// Disable interlacing
imageinterlace($im, false); // did not use this but will do the same
// Save the image
imagejpeg($im, 'instagram_image.jpeg');
imagedestroy($im);
?>
When I started using this simple create and save script it all worked again. It looks like it does nothing but it did a lot for me! Hope it helps someone saving a lot of time, took me 1,5 day to figure out the exact problem.
I copied and pasted the Three.js code given here into an HTML file and downloaded the three.js package from the website, and configured the <script> tag to point to the location of the file three.min.js.
Nonetheless, when I open the HTML file, it displays a blank white screen.
What am I missing?
well I tryed the exact same thing and I'm seeing the wireframe cube rotating on screen. A few things to try.
1) drop the three.min.js right in the root folder and copy/paste the example code again without any alterations.
2) did you get the three.min.js from the zip package under the build directory? Or did you navigate the git repo and copy/paste it? If copy/paste was used be sure to click the "Raw" button to get the code without the wrapper HTML.
3) try the latest Firefox or Chrome browsers first. If it works there but not in say Safari, there are a few steps you need to take to enable WebGL in Safari first.
4) your video card may be blacklisted due to driver incompatibilities.
If none of these help, then post up the code, where you got the Three.js package, what browser and video card your using and I'll see what else I can do to help :)
I had the same problem. Windows hides the file extensions by default. I change it in folder options and it worked.
I am trying to add an image to the README.md in my repository using markdown below:
But the image is not showing when I visit my repository.
Instead the link to the image is showing up. Clicking the link will open the image in new window.
I have also tried using relative path:
But this is giving page not found error.
What is the correct markdown to display image in README.md
Both README.md and image file are in same path/directory.
What is the correct way to display an image in github README.md?
Complete content of README.md file is as below:
Voice-controlled-MP3-Player
===========================
A MP3 player which accept voice command like PLAY, PAUSE, FORWARD, etc. Using C# and Microsoft Speech API.
Updated content
Since January, 30th 2013, GitHub now supports relative links in markup documents.
This means that your code  would now work flawlessly.
As pointed by #Brad, this may also ease a scenario where the images are different in two branches, but bear the same. In that case, switching from one branch to another, would dynamically switch the image in the rendered view, thus without requiring any change to the Readme content.
Blog post announcement
Help article
Previous answer when GitHub wasn't supporting relative links
You have to use the raw url format. In your case that would be https://raw.githubusercontent.com/i-saumitra/Voice-controlled-MP3-Player/master/screenshot.jpg
This means that the correct markdown would be the following
Using this in a .mdfile on github will display the following picture ;-)
Update following your comment
where is this officialy documented that we have to use raw...i couldn't find it anywhere
This URL format is an undocumented feature of the GitHub site. This means that it could change later. If that ever happens, in order to "rediscover" the new format, click the Raw button when displaying a image. This will "open" the image in your browser. Copy the URL and Voilà!
Note: Although the repository is no longer on hosted on GitHub, I've updated the urls to reflect the new GitHub policy regarding user content
You really should use relative urls. That way they'll work better for private repos as well.
supposing your repo has latest.png inside the screenshots folder.
~B
For relative URL's to work with images, wrap it inside the paragraph tag.
I was facing the problem, especially when working with the single image.
Example:
<p>
<img src="relativePath/file.png" width="220" height="240" />
</p>
An extension to previous answers...
The image would not show for me when the line:
Was directly below a <h2></h2> line and I needed to add an empty line between them.
Hopefully this saves someone some time!
Thought I would update this for 2019 as I had trouble figuring this out for myself. I uploaded my images to a repo on GitHub, and then used the raw url of the image to import it into my markdown file. To get the raw url, click on the specific image link in GitHub so you are on the page for that specific image. To the top right of the photo, there are two buttons, "Download" and "History". If you click "Download", it takes you to that raw url with the picture taking up the full screen. Copy that url, and then paste it like this in your markdown file:
The button used to say "Raw" not "Download" so I hope this helps people find it.
This may not be relevant to previous answers. I have the same question as the OP - I was directed here and it didnt help me. I hope I can help add light to this question however - as it covers the possibilities of why images does not render in README.md file.
The issue I encountered is that the file name README.md file is written as readME
Not only its missing .md its also written differently.
Apparently, we should not rename the README.md file. It has to be the original name of that file in order to render the images or gifs you want to upload on github README.md page. Hope this helps someone, in rare of occasions, just like I did.
Check the file extensions because .png is not the same as .PNG.
Also use / instead of \ while specifying the file path.
Side note, when using reStructuredText use:
.. image:: /screenshots/latest.png?raw=true
I've tested with "Copy path" and in some locations this was working and in others it didn't.
In the cases it didn't, I copied the permalink and used it instead.
It doesn;t work when there are any html tags just above the line where image is being imported. You can try removing the html code or add some blank lines for the image to show on Readme.
This is just to help someone who is still having issues with image rendering in README.md:
If your image is named Some Name.png and you are trying to attach it in the README.md like , it won't work. The image has to be saved without any spaces in the file name.
So Some_Name.png with  will work.
Make sure you check the case of the file extension. They have to match (either capital or lowercase). If you have my_image.PNG in your root directory and you add  to your README file, it will not work. For some reason, Windows likes to capitalize file extensions sometimes. Unfortunately, Git does not recognize extension case so if you try to fix it by just changing the file name, you won't be able to commit the changes to the repo since Git will think everything is up to date. So you either have to update README.md or do some workaround like moving the file out of the directory, making a commit, then editing the file name then moving it back and doing another commit.
I had to add a <br> to return a line in order for the image to show on mine. This discovery was inspired by the comment in this thread to leave a blank line after a tag.
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.
I'm trying to see what a certain webpage would look like if I replaced a certain image with another. Rather than upload the image, edit the site, etc, each time I tweak it, I'd like to know if there's a way to change the image in the page to my local version while viewing the remote page.
I use Firebug for debugging web development usually, but I'm open to any other tool that might do this.
(It is absolutely impossible to search for this and find anything but questions about dynamic image swapping on a deployed website, so sorry if this is a duplicate.)
Added: I just tried substituting a file:/// URI pointing to the image (copied and pasted from the address bar after manually opening the image), and alas, it did not work — the image fails to change.
It seems to only work with the http[s] protocols (likely for security reasons). You can store your images on service like Dropbox, share the image or folder, then use the public URLs.
Really, you can use any web accessible images, so a local server would work too.
If your image is in a localhost server(not as file mind you) i think you can still put that localhost url in the firebug inspect element and it'll work.
Tried an absolute file path but it doesn't work apparently. So I guess you just have to make do with a localhost server image. That works for me
Quick and Lowtech Answer: Take a screen shot of the page open it in photoshop and drop the local image on a layer above the webpage image.
Hi if you are serving from a webserver, u probably can't point it to a file on ur local drive. Even if its localhost, u can't point to a local file c:/test.jpg for example. Its because the browser sorts of sandbox ur page so that scripts can't access local files.
One way is to upload the new file (new_file.jpg) to the webserver, give the image link an id
<img id="something1" src="test.jpg"/>
Using jQuery in the firebug watch window do
$("#something1").attr("src","new_file.jpg");
You should see the image change. If you are not using jQuery, you can use document.getElementById("something1") and get the element to modify.
Another way is to use http://makiapp.com/
You can overlay an image from you computer onto any website you look at with this. Very cool tool for lining up a comp with your code.
You can:
Drag your test image into Google Drive
Open it in a browser
Go to the actual image path
Use this path as a substitute in Firebug
It's almost as fast as working from a local drive.