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>
Related
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') }}')">
I am a beginner with regards to CSS and HTML but have searched everywhere for a solution to this and still have no idea what is going on.
I am attempting to create a background image with a logo/subtitle on top of it. Although only the subtitle and alt text is showing up. I have gone over the syntax multiple times and am still unsure of where the error is as I am declaring the correct css specifications from what I can tell.
#HTML:
<div class="blog-type-wrapper">
<div class="blog-type-img-background" style="background-image:url(images/software.jpg)"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/software-logo.png" alt="soft">
</div>
<div class="subtitle">
Software N Stuff
</div>
</div>
</div>
#CSS
.blog-type-img-background{
height:500px;
width:100%;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}
There is space on the web page allocated to the image, however no images appear. The images are in another folder named "images" in the same directory as both the html and css files. This is occurring in a PHP file, I have attempted researching if that makes a difference in comparison to HTML file, and have found nothing but I cannot see how it would make a difference with regards to this issue.
Edit
The file path was incorrect. Thank you to #Heretic Monkey and others
"Look at the Networking tab of your browser's developer tools and look for any errors, like a 404 with the image's file name. That will show the full URL to the image it's trying to load. It's likely incorrect, relative to the HTML file. Fix that"
After looking in the networking tab I realized that my file path was incorrect and changing it to style="background-image:url(wp-content/themes/my-theme/images/software.jpg)"> worked in loading the image as expected.
Change
style="background-image:url(images/software-logo.png)"
to
style="background-image: url('images/software-logo.png');"
Also, depending on where your images folder is located, you might need a / before, like this: /images/software-logo.png.
The result would be this:
<div class="blog-type-wrapper">
<div class="blog-type-img-background" style="background-image: url('images/software-logo.png');"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/software-logo.png" alt="soft">
</div>
<div class="subtitle">
Software N Stuff
</div>
</div>
</div>
Source should contain either /, ./, or ../:
In case the image folder is in the absolute root path, you should use /images/image.png
If it's in the same directory as the current file's location, then use ./images/image.png
If it's in an upper folder, use ../images/image.png
<!-- First Parallax Image with Logo Text -->
<div class="bgimg-1 w3-display-container w3-opacity-min" id="home">
<div class="w3-display-middle" style="white-space:nowrap;">
<span class="w3-center w3-padding-large w3-black w3-xlarge w3-wide
w3-animate-opacity">Lori
<span class="w3-hide-small">Roberg</span> - Web Designer and
Developer</span>
</div>
</div>
/*css code*/
/* First image (Logo. Full height) */
enter code here
.bgimg-1 {
background-image:url('images/flpic.png');
min-height: 100%;
}
I can not get the flpic.png background image to display.I have tried many different urls - such as - ('/images/flpic.png'), ('../images/flpic.png') and the one above. My file structure is HTML5 index.html, style.css and a folder named images.
Try this. I think the property is background
.bgimg-1 {
background:url("/images/flpic.png");
}
With the way URLs need to be structured, try the following:
Current Directory: ./
Back Directory: ../
Forward Directory: /
My suggestion is to use url(./images/flpic.png)
I have noticed something from the link you provided. They have used custom css file. Add the following code inside your if your haven't added it.
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
item.imgSrc has a URL which takes time to load on screen. Is there any way to add a placeholder image or default image until the item.imgSrc image is fully loaded?
<div class="style" *ngFor="let item of array;
<div [style.backgroundImage]="url('+ item.imgSrc +')" class="image"></div>
</div>
You can use [ngStyle]="{'background-image':'url(' +imageUrl+ ')'}"
One way, You can create a directive to set a placeholder image for an element in html.
in your case, you can do as below also :
<div>
<img src="img/placeholderDefault.jpg" ng-src="{{item.imgSrc}} " height="150px " width="300px ">
</div>
where when your real image is loaded then it will replace the placeholderDefault image. and you can set the ng-src image base on your need in your desired scope.
If ng-src does not work in angular 2+ then, try
<img src="{{item.imgSrc}}">
or
<img [src]="item.imgSrc">
in this case, declare an object in your scope in the controller as
$scope.item={} and set $scope.item.imgSrc="defaultImagePath" and when your new
original image loads then replace with the original image path.
Hope this idea can help you
This is how my landing page should load:
This is how my landing page does load:
On the page that renders wrong, the code for hero, which is cut off at the top, loads the background image just fine with the following code:
(React/JSX):
<section className="hero-section" style={ { backgroundImage: "url('https://s3.us-east-2.amazonaws.com/housessoldeasily.com/img/bg.jpg')" }> </section>
But when I try that same method with the four other images:
<div className="propertie-item set-bg" style={ { backgroundImage: "url('https://s3.us-east-2.amazonaws.com/housessoldeasily.com/img/propertie/1.jpg')" } }></div>
It doesn't load. When I inspect element, I see this:
<div class="propertie-item set-bg" style="background-image: url("undefined");"></div>
I did define the URL in my code but for some reason it isn't getting passed through.
Yet when I view the network tab, all of the image requests received 200 responses
Really not sure why it works for the hero's background image but not for the sub-categories.
You can go to housessoldeasily.netlify.com for a working static-version of the site. This is not the React version of the site.
Here is a Github link to the component where the background image loads fine:
https://github.com/jfny/custom-everything/blob/master/client/v1/src/components/homepage/HeroSection.js
Here is a Github link to a component where I try the exact same thing but the background doesn't load:
https://github.com/jfny/custom-everything/blob/master/client/v1/src/components/homepage/PropertiesSection.js
If anyone has any insight it would be appreciated. Thanks.
#J. Doe,
I got your problem. It is worth raising an issue with react team to debug more. But the route cause/fix i have in place is as below. Hope that helps!
Root cause:
When series of css class names have -, the inline url is set to undefined.
Workaround: (either one of the below)
Remove the additional class set-bg.
Replace the - in the class names.
Sample html
<div className="col-md-6">
<div className="propertie-item set_bg" style={ { backgroundImage: "url('https://s3.us-east-2.amazonaws.com/housessoldeasily.com/img/propertie/4.jpg')" } }>
<div className="rent-notic">FOR Rent</div>
<div className="propertie-info text-white">
<div className="info-warp">
<h5>339 N Oakhurst Dr Apt 303</h5>
<p><i className="fa fa-map-marker" /> Beverly Hills, CA 90210</p>
</div>
<div className="price">$3000/month</div>
</div>
</div>
</div>
CSS
.set_bg {
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
}
I'm not sure if you are the author of this template, I've been using this template and trying to modify it to let it suit my own use.
I encountered the same problem as you did, if you look at the template's bundle there is a js file in js/main.js, open it up and look for the "background set" commented section:
$('.set-bg').each(function() {
var bg = $(this).data('setbg');
$(this).css('background-image', 'url(' + bg + ')');
});
The problem is when the browser loads the code, whatever is inside of the (function(){...})() gets executed immediately even before the page(html file) has loaded, if it happens(in this case it always happens), the JavaScript interpreter will not find any html elements belongs to class 'setbg' because there is no html file.
The solution I did is to put whatever code you need(not just the utility of 'setbg') into that $(window).on('load',function(){...}) and get rid of the old code.
Hope this helps.