I am using Tailwind inside my Flask project. And I want to insert a background image using url_for() inside style. I have the usual static folder recommanded by flask and inside it I have an images folder and inside it my background images folder as shown in the code bellow. The problem is that the image don't show up.
<div class="w-1/2" style="background-image: {{ url_for('static', filename='images/background/bg1.jpg') }}">
This is the tree of folders
-|App
----|static
----|templates
--------------|Authentication
----------------------------|index.html
I tried url_for() to insert the image.
The issue is the proper formatting of css's background-image attribute. You need to put the link to the image into a special url('') format. In your case, you should be able to reference the image successfully with
<div class="w-1/2" style="background-image: url('{{ url_for('static', filename='images/background/bg1.jpg') }}')">
Related
I am trying to display a background image in a Nuxt/Tailwind application. The image is in the assets/images/ folder. This is my div =>
<div class="w-full h-405" style="background-image: url('~assets/images/my_image.png');">
some text/string
</div>
The image doesn't show.
In my inspector I have
element.style {
background-image: url(~assets/images/my_image.png);
}
and if I hover on the link ~assets/images/my_image.png I see
Rendered size: 1 × 1 px
Rendered aspect ratio: 1∶1
File size: 43 B
Current source: http://localhost:3000/~assets/images/my_image.png
My guess is that the Rendered size: 1 x 1 px means the image isn't rendered. How can I display a background image without inserting that image in the tailwind.config.js file ??
I have removed the image files from the assets folder and put them in the static folder. To use them in Nuxt, I called them like this
<div class="w-full h-405" style="background-image: url('/images/my_image.png');">
some text/string
</div>
images is the folder containing my images in the static folder.
This solution worked for me:
<div class="w-full h-405" :style="{'background-image': `url(${require('#/assets/images/my_image.png')})`}">
some text/string
</div>
It seems that using -assets/image.png triggers Webpack for the src: attribute, but not for the background-image: attribute.
This code is worked for me.Normal Url only work for online images.For local images, should use require.
<div
class="h-72"
:style="{
'background-image': `url(${require('../static/assets/Rectangle.svg')})`,
}"
></div>
I'm having trouble with displaying images with Django templates {%static%}.
<div class="slide" style="background: url({% static "images/header/header-1.jpg" %}) center center; background-size: cover;">
However, I am successfully able to display an image with tag
<img src={% static "images/logo.png" %} alt="Olga">
Thanks in advance
The way you use the {% static %} in inline styling is just fine. One suggestion (purely cosmetic is to use 'images/header/header-1.jpg' rather than " ").
Here are ways to debug.
clear browser history and try again.
if 1) does not work, open google chrome developer tool, and see if you have
GET ... 404(Not Found) error. If this is the case, it just means that your file path is wrong. Make sure that when you put
<img src={% static "images/header/header-1.jpg" %}>
in the SAME template file, the image shows up.
I'm pretty new to HTML and I'm trying to add some images to my page. Images are located in a subfolder , but two subfolders won't work:
<img id="lungIcon" src="icon/red/001-medical.svg">
<img id="liverIcon" src="icon/003-human-liver.svg">
liverIcon is show, but lungIcon not. red is a subfolder of icon and my editor (WebStorm) even autofills the src of lungIcon because it can find the file.
Inside the icon folder
As you can see red is inside icon. red contains the same files as icon but in a different color. Why won't lungIcon.svg display?
Try using relative path (`./your/path/to/img) eg:
<img id="lungIcon" src="./icon/red/001-medical.svg">
<img id="liverIcon" src="./icon/003-human-liver.svg">
Or try using full path. like src="/images/icon.svg", that's how I do mine.
I have my css which contains a class
.Img{
background: url('../assets/Trump.png');
}
And the html looks like this :
<div class="Img">
But when I want to have it like this
<div class="Img" style="background: url('../assets/Trump.png');">
the image won't load for me and I get an error
>GET http://localhost:8080/assets/Trump.png 404 (Not Found)
I am working with vue.js 2.0 and webpack
The main issue here is relative paths.
If you have this structure for example:
/page.html
/static/
/assets/
/Trump.png
/css/
/file.css
And inside your page.html you have a <link> tag to your css (in static/assets/css/file.css), the call to ../assets/Trump.png from that css file will get to the correct place (because from the /css directory - 1 directory up is the static directory, and from there we go inside the assets and everything is ok).
However - If we are inside the / directory (where the page.html exists), this is also our root directory, when we try to go to ../assets/Trump.png the relative path we get is /assets/Trump.png (which does not exists in our server. The correct path should be /static/assets/Trump.png).
You should check the structure of your directories and put the correct relative path.
Remove the apostrophes in the url(), url() function does not need them
<div class="Img" style="background: url(../assets/Trump.png);">
Edit your image url to this
<div class="Img" style="background-image: url('assets/Trump.png');">
when you are declaring this background-property in your css the url is correct the assets folder is in the parent directory of css. but when using inline css the assets and the html file are in the same directory that is why you are getting this error.
Check your image path, there's a chance that's the issue. Check this out: CSS background image URL path
I've started using Bootstrap for a project, and in particular, the Thumbnails component. On the thumbnails example on the documentation, the following sample code is shown:
<ul class="thumbnails">
<li class="span4">
<a href="#" class="thumbnail">
<img data-src="holder.js/300x200" alt="">
</a>
</li>
...
</ul>
Notice the use of data-src to replace the usual src attribute on the <img> tag.
I assumed that to get my thumbnails working, I should use data-src instead of src for the images, but that does not seem to be the case. I've only been able to load images by defining the src attribute. It seems others are having the same problem.
Is this a typo in the documentation, or did I not understand correctly how to use data-src?
I believe that the only reason of why bootstrap guys are using data-src instead src, it's because of holder.js. You should use src instead of data-src because data-src is only used for the javascript library that generates the example images of a certain size, and src is the normal attribute for specifying the location of an image (Source: W3C)
Why are they using in the documentation data-src? I suppose that even the syntax <img src="holder.js/100x200"></img> is accepted by the library as it is in the holder.js documentation, when we access to the page it throws a 404 error in the image even when the image is displaying, because there is not any file in the specified path, what it's weird.
Why do they put that in the documentation code? I really don't know. Probably it's a mistake. But I am sure that you should use src instead data-src in thumbnails.
How to use it
Include holder.js in your HTML:
<script src="holder.js"></script>
Holder will then process all images with a specific src attribute, like this one:
<img src="holder.js/200x300">
The above tag will render as a placeholder 200 pixels wide and 300 pixels tall.
To avoid console 404 errors, you can use data-src instead of src.
Holder also includes support for themes, to help placeholders blend in with your layout. There are 6 default themes: sky, vine, lava, gray, industrial, and social. You can use them like this:
<img src="holder.js/200x300/industrial">
Bootstrap uses Holder for thumbnails in its documentation.
It's pretty well explained on the Holder github page.
Include holder.js in your HTML. Holder will then process all images with a specific src attribute... The tag will render as a placeholder. To avoid console 404 errors, you can use data-src instead of src.
In order for me to get this to work, I had to call the run() function in holder.
I am using require to load backbone views, inside my view I include holder
var Holder = require('holderjs');
Then inside render I can run
Holder.run();
And in my template I have
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img data-src="holder.js/200x200/text:hello world">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>Button Button</p>
</div>
</div>
Hope that helps.
I couldn't figure it out either, as far as I understand it holder.js is actually a completely separate js file to act as an img placeholder from http://imsky.github.io/holder/
data-src is used to pass to the javascript, the /100x200 is the dimension of the picture you want the javascript 'holder.js' to take up for the real img.
I think the idea is to prototype using this (data-src="holder.js/300x200") and then replace it with sized pictures (src="Logo.png") afterwards.
For future Googlers looking for how to use with NPM/build jobs this worked in my case:
window.Holder = require('holderjs').default;