pythonanywhere: - img src not showing picture - image

My page: https://bbqbailey.pythonanywhere.com/ is not showing correctly - image is missing.
I see the picture if I do this from a computer that is logged into pythonanywhere.
I do not see it on any other computer!
So I'm expecting that some sort of permissions problem is going on, but the "ls -al" in console shows everything with 644 permission.
The text is displayed correctly, as is the 'alt' info, but the actual image isn't shown.
I put the image at: /home/mysite/learningFlask/SarahJustinEngaged.jpg, and I can see it as stated above from a computer logged into pythonanywhere, but no other computers can see it if not logged in.
I don't see anything from any computer if I use the "
What am I missing????? Help! We're wanting to show this to family and friends now!!!
Here is my code
<!DOCTYPE html>
<html>
<body>
<h1>Sarah and Justin are Engaged!</h1>
<img src="https://www.pythonanywhere.com/user/bbqbailey/files/home/bbqbailey/mysite/learningFlask/SarahJustinEngaged.jpg" alt="Sarah and Justin are Engaged!" width="567" height="500">
</body>
</html>

actually Django support consept of static file so create a folder name static inside your project folder store all image on that
{%load static%} <!DOCTYPE html> <html> <body> <h1>Sarah and Justin are Engaged!</h1> <img src="{% static 'SarahJustinEngaged.jpg' %}" alt="Sarah and Justin are Engaged!" width="567" height="500"> </body> </html>

Related

Laravel, `.png` image in public/images/product folder not displaying correctly

I am a newbie and just want to go from route->view for one image.
The image name is Frozen_Ophelia_800x.png
Here is my route:
Route::get('/products', function(){
return view('/pages/product');
});
Here is my product.blade.php
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1> <img src="public/images/product/Frozen_Ophelia_800x.png"></img></h1>
</body>
</html>
However, when I access either http://localhost:8000/products or http://127.0.0.1:8000/products I just get a tiny little icon in the top left:
I used command line to move the image to that folder from my Desktop in Ubuntu 18.04.
Here is what my project structure looks like with said image displayed:
You can access images form public folder.
(1) pass path with APP_URL
<img src="http://127.0.0.1:8000/images/product/Frozen_Ophelia_800x.png">
(2) pass path without APP_URL
<img src="/images/product/Frozen_Ophelia_800x.png">
Most likely it's an issue with the image URL being determined relative to the current page, so it would be trying to fetch:
http://localhost:8080/products/public/images/product/Frozen_Ophelia_800x.png
You can confirm that by looking at the developer console in the browser, then the network traffic.
If so, you can rewrite the img tag as:
<img src="/public/images/product/Frozen_Ophelia_800x.png">
Adding the / to the start makes the browser look for the image starting at the site root, so:
http://localhost:8080/public/images/product/Frozen_Ophelia_800x.png

YOURLS Short URL to Domain

Morning - I'd like to redirect my short url ie: https://sho.rt to my domain https://short.com
At the moment my sho.rt is pointing at the admin panel. Could you please advise as to how I'd redirect.
Thank you
You will need to build an index.php file that sits in the yourls top level directory. A simple example of how to redirect using html is.
<html>
<head>
<title>Your Site Title</title>
<script>
window.location.replace("https://www.yourwebsite.com");
</script>
</head>
<body>
<h2>If you are not automatically redirected in 5 seconds, Click Here</h2>
</body>
</html>

Empty page in Webmatrix

I wrote (copied) a first program in WebMatrix. I selected EmptySite template and in Page.cshtml I typed 2 lines. Finaly, the code in Page.cshtml looks like this:
#{
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>Welcome to the WebMatrix!</h1>
<p>I began to become a web developer on #DateTime.Now.ToString()</p>
</body>
</html>
I pressed "Run" but I got an empty web-page. Nothing is written on it. I received no error message.
Well, what's wrong ?
Thanx,
Eb_Cj
You seem to be going to the default document rather than your page. You can solve this in two ways: either right click on the Page.cshtml node in the project explorer within WebMatrix and select Launch in browser or manually change the URL in your browser to localhost:25776/Page.

How can I have a dynamic image show when someone clicks the Facebook Like button and Posts to Facebook?

Currently, when someone 'likes' a link and creates a Facebook post (via the like button), it will only grab the one image that I specify in the meta tag (via the og:image property).
What is the best way to allow people to post a dynamic image with dynamic description? In my case, I have several items (with image & description) listed on a page that the user should be able to 'like' and post on their wall. Any advice would be much appreciated.
Thanks!
Change the meta tag on click: use this example and modify it to your needs.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<title>Title Of Page</title>
</head>
<body>
<input type="button" value="Click Me" onclick='$("title").html("Changed Dynamically");'/>
</body>
</html>

My HTML tags gets tampered with

I have an Umbraco 5 MVC3 project where i discovered that there where white spaces here and there. When investigating i discovered that my HTML looked really bad when "viewing generated source" in firefox web developer tool. For example it removes my doctype declaration and moves my meta-tags and stuff out of the head. Simplified code:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>#ViewBag.Title</title>
<link rel="stylesheet" href="#Url.Content("~/Content/Styles/style.css")"/>
</head>
<body id="" class="default">
<div id="wrapper">
<header id="banner" class="body">
<a class="ir logo" href="/"><h1>Christian </h1></a>
<ul class="share">
<li id="facebook"><a class="ir" href="http://www.facebook.com/sharer.php?u=#Request.Url.AbsoluteUri">Facebook</a></li>
<li id="twitter"><a class="ir" href="http://twitter.com/share?text=Christian">Twitter</a></li>
</ul>
#Html.Partial("nav")
</header>
<section id="content" class="body">
#RenderBody()
</section>
</div>
<script src="#Url.Content("~/Scripts/plugins.js")"></script>
<script src="#Url.Content("~/Scripts/script.js")"></script>
</body>
</html>
And the output begins like this
<html class="no-js" lang="en"><head></head><body id="" class="default">
If you want to check on the HTML generated by your server, you should use View source (CTRL + U).
Generated source is more like a reconstruction of the HTML based on the DOM and includes for example nodes created on the client side with javascript, once the page is loaded.
Alright, i solved it. Took me a while. After Marapet suggested not to use "generated source" i tried normal "view source" in a bunch of browsers and got different results in all of them. When i tried to validate my source i got some weird complaints:
Non-space characters found without seeing a doctype first. Expected <!DOCTYPE html>.
Element head is missing a required instance of child element title.
And my personal favourite
Cannot recover after last error. Any further errors will be ignored.
Looked like there was something up with the doctype. Opened up notepad and pasted in there to "wash" the code from metadata, the way i do sometimes when pasting stuff in to tinyMCE. The text got formatted weird even in notepad. The doctype declaration had a smaller font size then the rest of the html.
So i opened it in notepad++ too and there i got a bunch of questionmarks in front of the declaration. I removed them and copied it back in to Visual Studio, saved and now everything works.
I think the reason i got this problem was that i copied snippets directly from the HTML5 Boilerplate on github.
// Sherlock

Resources