I have a django website, and in my html I get these in my visual studio editor, I don't know why. Basically everything works, but I have some problem with flex, sometimes it doesn't work, also I don't know if it is connected.
Any idea what is this?
This is home.html
<section class="welcome_area clearfix" id="home" style="background-image: url({% static 'img/bg-img/welcome-bg.png' %})">
Same in base.html
<div class="mosh-breadcumb-area" style="background-image: url({% static 'img/core-img/breadcumb.png' %})">
EDIT
After changing based on sunil ghimire answer.
The problem is with the double and single quotes Django is misinterpreting them(strings ends at wrong place), because you have to use 3 nested strings.
your 3 strings are :
1 : "background-image: url()".
2 : '{% static %}'.
3 : "/img/core-img/breadcrumb.png"
how django is interpreting them (starting and ending quotes) :
1 : "background-image: url('{% static ".
2 : img/core-img/breadcumb.png.
3 : " %}')";>.
What you can do :
use Absolute url instead of {% static %}
home.html
<section class="welcome_area clearfix" id="home" style="background-image: url('{% static "img/bg-img/welcome-bg.png" %}')";>
base.html
<div class="mosh-breadcumb-area" style="background-image: url('{% static "img/core-img/breadcumb.png" %}')";>
Related
I have to put images in my PDF, however the images cannot display, instead it display like image not found or type unknown There are two images that have to display:
from public directory /default.png
from Voyager settings Voyager::image(setting('admitcard.signature'))
Below are my code:
$pdf = PDF::setOptions(['isHtml5ParserEnabled' => true)->loadView('pdf', compact('data'));
return $pdf->download($data->name.'-admit-card.pdf');
If I didn't use setOptions then the public image is display but not Voyager Image.
Below are my html:
<img src="{{ URL::to('/') }}/default.png" alt="default">
<img src="{{ Voyager::image(setting('admitcard.signature')) }}" width="70">
I've search but cannot debug, any help would be appreciate. Thanks in advance
For those who have problem like me I solved it like below:
$pdf = PDF::loadView('pdf', compact('data'));
return $pdf->download($data->name.'-admit-card.pdf');
And in HTML:
<img src="default.png" alt="default">
<img src="storage/{{ setting('admitcard.signature') }}" width="70">
I have some decks of cards.
I want to display a specific image for each deck, I have an assets folder with all my images.
<div class="decks">
<div *ngFor="let deck of decks" class="deck">
<img
src="../../assets/img/MAGE.png"
MAGE is just an exemple of a deckClass, that name should match deck.deckClass
class="img-responsive"
style="height: 200px;">
<h4> {{deck.deckName}} : {{deck.deckClass}} </h4>
<p *ngFor="let card of deck.deckCards" >
{{ card.name }} : {{ card.manaCost }}
</p>
</div>
</div>
How can I concatenate in a src attribute the deck.deckClass name in a dynamic way?
Consider using the Expression Context
You can wrap the sry attribute with square brackets, this way Angular will know to evaluate the value:
[src]="'../../assets/img/' + deck.deckClass '.png'"
See a demo here: https://stackblitz.com/edit/angular-ua9cfc
I don't have images in there, so they will be shown as broken img's in the demo ...
p.s.: if those images are in your src/assets/ folder, then this should suffice:
[src]="'assets/img/' + deck.deckClass '.png'"
Between once a second and 10 times a second I get the following message displayed on the console:
"GET /%7B HTTP/1.1" 404 26453
After running python manage.py runserver
I believe it has some relation to my carousel image strip because it stops the timer animation from scrolling across the top of the image to indicate how long left the image will be shown for until it moves on to the next one:
{% for image in images %}
<img src="/static/images/background-carousel.png" style="z-index: -1">
<li data-masterspeed="1500" data-slotamount="7" data-transition="zoomout">
<div class="tp-caption customin customout" data-captionhidden="on"
data-customin="x:0;
y:100;
z:0;
rotationX:0;
rotationY:0;
rotationZ:0;
scaleX:1;
scaleY:3;
skewX:0;
skewY:0;
opacity:0;
transformPerspective:600;
transformOrigin:0% 0%;"
data-customout="x:0;
y:0;
z:0;
rotationX:0;
rotationY:0;
rotationZ:0;
scaleX:0.75;
scaleY:0.75;
skewX:0;
skewY:0;
opacity:0;
transformPerspective:600;"
data-easing="Power4.easeOut"
data-endeasing="Power1.easeIn"
data-endspeed="300"
data-speed="750"
style="z-index: 9;
text-align:center;">
<img alt="{{ image.title }}" class="boff_white" data-bgfit="cover"
data-bgposition="center center" data-bgrepeat="no-repeat"
src="{{ MEDIA_URL }}{{ image.image }}"
style="width: {{ image.width }}; height: {{ image.height }}"/></center>
</div>
</li>
{% endfor %}
After the above code there are some more images hard-coded.
I am wondering what it means and how it can be fixed?
I am currently taking over development on the website from someone else (the for loop scope of code is the only bit that is mine).
Using Django 1.11 (cannot upgrade this)
Thank you.
Check answers for solution!
But what does the message mean?
Edit:
From here: https://www.w3schools.com/tags/ref_urlencode.asp %7B is a { ASCII encoding reference...
There was a {# without a closing #} in a src="{% static 'images/carousel...' %}" in the hard-coded section.
%7B is the ASCII encoding reference (see here: https://www.w3schools.com/tags/ref_urlencode.asp)
I want to build a list of clickable links for my nav, and because these are links to my site, I want to use the url-tag. I get a list of dictonaries which knows all names for the links and create a template string with them with this function:
def get_includable_template(links):
output = '<ul>'
for link in links:
output = output + '<li><a href="{% url' + get_as_link(link) + '%}>" + link['shown'] + '</a></li>'
output = output + '</ul>
links looks like this:
links = [
{'app': 'app1', 'view': 'index', 'shown': 'click here to move to the index'},
{'app': 'app2', 'view': 'someview', 'shown': 'Click!'}
]
get_as_link(link) looks like this:
def get_as_link(link):
return "'" + link['app'] + ':' + link['view'] + "'"
The first method will return a template, which looks like this (but it's all in the same code line):
<ul>
<li>click here to move to the index</li>'
<li>Click!</li>
</ul>
I want this to be interpreted as template and included to another template.
But how to include this?
Let's say, my other template looks like this:
{% extends 'base.html' %}
{% block title %}App 1 | Home{% endblock %}
{% block nav %}INCLUDE THE TEMPLATE HERE{% endblock %}
{% block content %}...{% endblock %}
What I have already tried:
make the template string a variable - doesn't work, because it doesn't interpret template language in variables (I couldn't find a template tag similar to safe which not only interprets HTML code but also template code.
Building HTMl code in my methods (Isn't best-practice at all, because I needed to use absolute paths)
Is there a good solution about this?
You are making this more complicated than it needs to be.
Firstly, it seems that the only reason you need this to be interpreted as a template is so that it parses the url tag. But there is already a way of creating links in Python code, and that is the reverse() function. You should use that instead.
Secondly, the way to dynamically generate content for use inside a template is to use a custom template tag.
I've been trying to do the following in my .hbs file:
<div class="nav-avatar" style="background-image: url('\{{ url }}avatar/\{{ user.pic }}');"></div>
However the CSS when looking through the website looks as so:
<div class="nav-avatar" style="background-image: url('avatar/');"></div>
Both {{ url }} and {{ user.pic }} display as they should otherwise.
I over complicated the problem. Didn't need to escape it.
<div class="nav-avatar" style="background-image: url('{{ url }}avatar/{{ user.pic }}');"></div>