The CSS stylesheet isn't loading, nor are any of the pictures loading.
The site, Github folder
It is because the mentioned URL is mismatching with the original one.
The name of the folder which contains the images is Image and not image, the difference is the letter I, it should be in capital.
As: You have used <img class="mountain" src="images/mountain.png" alt="mountain-img">, which gives an Error 404. Use <img class="mountain" src="Images/mountain.png" alt="mountain-img"> instead and it will work well.
Related
I want to input an image in the .html so I put the image in the static files and I don't want to apply CSS. But it says it can't find that pic I wanna use.
In the .html file, I wrote like this
<img src="images/background.jpg alt="It is an img">
So, can anybody tell me what to do or anything I should change in other files like settings.py?
My files context is what the image shows.
Please add some code for better understanding of your question, and you can add image directly in your question without sharing external links.
For static file you can use,
{% load static %}
<img src="{% static 'your image location' %}" alt=image>
# in your case location is 'lemonade/images/background.jpg'
Here is the official document,
Django Static Files
The documentation for the Foundation for Apps (and Angular Base Apps, which is the now-maintained fork of F4A) Interchange gives this example as a way to load only the small size of an image on mobile devices in order to save bandwidth:
<ba-interchange>
<img media="small" src="assets/img/small.jpg">
<img media="medium" src="assets/img/medium.jpg">
<img media="large" src="assets/img/large.jpg">
</ba-interchange>
However, while only the small image is displayed, the browser still sees three img tags and requests all three images, before angular is even loaded. This defeats the purpose of using the interchange at all, at least, if your purpose is to save bandwidth.
The Foundation 6 for Sites Interchange avoids this by putting all of the images into a data-interchange attribute string on the element instead. Does F4A have something similar that I'm missing? Or is there something about the above example code that I'm missing?
I would suggest using the ba-if directive provided by Angular Base Apps. This directive internally uses the ng-if directive, causing the img element to not be added to the DOM except when the specified media query is matched.
Your code can be re-written as follows using the ba-if directive:
<img ba-if="small only" src="assets/img/small.jpg">
<img ba-if="medium only" src="assets/img/medium.jpg">
<img ba-if="large only" src="assets/img/large.jpg">
I recently pushed a static HTML site to Github Pages. Since it's not a blog, I opted not to use Jekyll. Now, of course, all of my relative image links are broken, and I've yet to find a fix that isn't specific to Jekyll.
Any ideas for a fix?
Will that fix continue to work once I switch from the username.github.io URL to a custom URL?
Not sure if I'm understanding the question correctly here, but could you not just move the images to the relevant place? For example, if in index.html you had
<img src="images/photo.png">
could you not just move photo.png to a directory /images in the same folder as index.html?
Alternatively, you could change the img tags' src attribute to instead point to the relevant location.
Both of these would continue to work, so long as the images are in the same directory as the html file, or a subdirectory of that directory.
The Ember CLI guide describes how assets can be referenced in the templates and the CSS - but what is the proper way of referencing an asset (say an image) from my javascript code?
Specifically I am concerned about the asset path getting fingerprinted correctly when building assets for production. It seems like ember-cli is using broccoli-asset-rev for this, but according to its documentation, only <script> tags in the HTML and url() in CSS will be fingerprinted. Is there any way (probably through another broccoli plugin) to get asset paths in the .js files fingerprinted, too?
I placed an image called car.jpeg under public/assets/images and then was able to reference it in my application.js route file as assets/images/car.jpeg
Works great
UPDATE
One picture is worth a thousand words... :)
I found the issue. This works out of the box as expected - it turned out that my asset (image) was not in the right location, so occurrences of it's path in the JS files never got replaced with the fingerprinted version.
I have a Qt program that downloads webpages (HTML), parses them and then generates its own HTML which is then displayed with QWebPage. Some times the HTML that I download contains IMG tags, which work fine when the src attribute contains a full URL. However, some times the IMG tag might use a relative path like:
<IMG SRC="images/foo.png" />
Since I know the URL that should be prepended to the SRC my first thought was to just tack it onto my resulting HTML when I'm parsing. However, this is proving more difficult than I anticipated and now I'm wondering if there's a better way.
If there any mechanism/property with QWebPage that I can say "use this URL for relative paths"? Or maybe someone can suggest a better way to accomplish what I want?
Thanks!
In the comments, you mentioned that you're using QWebView::setHtml(). The second, optional parameter of this method sets the URL to use for resolving relative paths. According to the documentation:
External objects such as stylesheets or images referenced in the HTML
document are located relative to baseUrl.
Setting that parameter should be all that's needed here.