I'm using angular file upload (https://github.com/nervgh/angular-file-upload/wiki/Module-API) and currently trying to access the uploaded file url before saving (so I can use it as a background image). I realize that you can easily create a thumbnail of the file, but I'm having issues accessing the url so I can use it as a background image (since I want to position the image and not scale it and show the whole image as thumbnail would do).
So I can access the image for a thumbnail:
<div ng-repeat="item in uploader.queue">
<div ng-thumb="{ file: item._file, height: 202, width: 376 }"></div>
</div>
But this does not work (I'm assuming because item._file is the actual image and background-image requires a url)
<div ng-repeat="item in uploader.queue">
<div class="row" ng-style="{'background-image':'url({{item._file}})'}">
</div>
Syntax wise, I know the ng-style is fine since I tried replaced the item._file above with a public url and the styling worked as expected. I also tried replacing item._file with item.url since url is a property of it and url is apparently null so that didn't work. Any ideas on how I can achieve this or alternate solutions?
Related
I have an image url fetched from an API and I want to display it as a background image. Is there any way I can implement this with tailwindcss or should I use styles attribute?
I think the best solution is to do what you suggested and use a style attribute. Tailwind CSS doesn't really deal with dynamic data, but rather with class names to add predefined styles to your element. The best you could without using the style attribute is to conditionally add/remove classNames from an element, but that would require you to know the image URL ahead of time, which defeats the purpose of getting it from an API.
I would do:
style={{backgroundImage: `url(${fetchedImgSrc})`}}
Edit:
It looks like you can actually use Tailwind to do something similar to the code above as per https://tailwindcss.com/docs/background-image.
The code looks like:
<div class="bg-[url('/img/hero-pattern.svg')]">
<!-- ... -->
</div>
I think I have found a solution other than simply using a style attribute.
<div
style={{'var(--image-url)': fetchedUrl}}
className='bg-[image:var(--image-url)]'>
<!-- ... -->
</div>
This works perfectly fine.
Although it looks a bit tedious, it can be used to enable the background image on hover, focus, etc. In which the style attribute is incapable of.
className='hover:bg-[image:var(--image-url)] focus:bg-[image:var(--image-url)] ...'
This application of custom properties can be used for implementing dynamic values with tailwind like colors fetched from an API.
<div
style={{'var(--color)': fetchedColor}}
className='text-[color:var(--color)]'>
<!-- ... -->
</div>
you can just use backgroundImage in Style
const bag2 = "https://via.placeholder.com/500"
<div
className = "someting"
style={{backgroundImage: `url(${bag2})`}}
</div>
Even with the latest implementation of the arbitrary-values - it seems like it's not working for Dynamic URLs.
In my case image was coming from an API. If it is the case, stick to style attribute.
In the solution below - bgImage is a prop.
<div className={`justify-center bg-no-repeat bg-cover bg-center rounded-lg`}
style={{ backgroundImage: `url(${bgImage})`}} >
<!-- Children here-->
</div>
If you are having this same issue in 2022, then this is what helped me with tailwind version ^3.0.23. I just moved the image to the public folder and used the link in my tailwind.config.js like so backgroundImage: { 'cover-pic': "url('/public/img/cover_pic.jpg')" } where /public/img is the directory where I placed the image within the public folder, yours might different. and then called the css like so bg-cover-pic within my project, and that was all it took.
I just went to html to jsx online converter https://magic.reactjs.net/htmltojsx.htm the pasted what I copied from tailwind website -
<div class="bg-cover bg-center ..." style="background-image: url(...)"></div>
then I just copied my new generated jsx code-
style={{ backgroundImage: 'url(/about.jpg.webp)' }}
Currently trying to learn AngularJS, I am playing around with image upload functions and using ng-thumb to preview the image file being uploaded. What I am trying to do right now is set the ng-thumb to show a default image and have that image be overriden when a new image is uploaded.
<div class="row-fluid col-md-12 text-center" ng-repeat="item in uploader.queue">
<div ng-thumb="{ file: item._file, height: 200, width: 300}"></div>
</div>
Is there a way to set a default image for ng-thumb? Thanks for your help.
You can create a new Image() with JavaScript API explained here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image
and use this image with ng-thumb. ( ng-thumb = "{ file: newImage, height: 200, width: 300}" )
I have an image in a div given below that appears on every page of my website and I have a URL link available to me that contains a profile picture. I would like to replace the image src attribute and update the profile picture and make sure that it updates on every other page. Any suggestions on how I can achieve this using javascript/jquery? Kindly let me know.
Test image URL: http://www.hdrspotting.com/images/default_profile.jpg
<div id="d2c-hey-user" class="d2c-user-panel" style="display: block;">
<img src="../images/defaultHeadshot_lg.png" style="display:none;" class="pacific-header-user-img">
</div>
My website contains the following code:
<ul class="thumbnails1">
<li>
<img src="~/Images/man1.jpg" alt="n/a"/>
</li>
</ul>
<input type="button" value="See More" onclick="OnSeeMore()"/>
<script type="text/javascript">
function OnSeeMore() {
$('.thumbnails1').prepend('<li><img src="~/Images/man1.jpg" alt="n/a"/></li>');
}
</script>
The original image appears well, but when i click "See More" button, I can see the list item is dynamically added, but the image shows the "alt" text n/a instead of the "man1.jpg" image. so what am I doing wrong?
I basically try to copy google's image search behavior, by showing only some of the images in the DB and then show more upon request.
~/Images/man1.jpg is a server-side relative path. If you are adding the node on the client side, you need to use /Images/man1.jpg assuming the Images folder is in the root folder for your site.
The relative path:
<img src="~/Images/man1.jpg"
Should be "resolved" on the server, if you add it on the client as is, the path is invalid.
Why does your URL include a ~? It should not use some linux specifc path since that is not a URL. It should be the path to get to it from the webserver, not the file system.
<!-- Relative -->
<img src="./Images/man1.jpg" alt="n/a"/>
<!-- Absolute -->
<img src="/Path/to/my/directory/Images/man1.jpg" alt="n/a"/>
I've got a body background image that is being "placed" by a plugin called ezBigResize that basically allows the image to scale with the browser window.
The designer wants to image though to be able to be swapped out by a series of thumbnails on the page, along with that image being randomized on page load from that series of images.
Initially before those two additions, I just had it setup like this:
$(document).ready(function() {$("body").ezBgResize({img : "/lib/img/bkgr/mainBG.jpg"});});
Then this is the code now (in a jQuery Tools scrollable)
<div id="bkgrSelector">
<div class="scrollNav">
<a class="prev browse left"></a>
</div>
<div class="scrollable">
<div class="items">
<img src="/lib/img/bkgr/selections/main-bg.jpg" width="77" height="44" />
<img src="/lib/img/bkgr/selections/main-bg02.jpg" width="77" height="44" />
<img src="/lib/img/bkgr/selections/main-bg03.jpg" width="77" height="44" />
</div>
</div>
<div class="scrollNav">
<a class="next browse right"></a>
</div>
</div>
I'm a little over my head though to allow these to both randomize on page load and to swap out the image via the value in the href.
I tried something like this, but it didn't work and is obviously inclomplete. Plus, it doesn't address the randomization at all.
$('#bkgrSelector .items img[href]').click(function()
{
$("body").css("background-image", "url()");
});
Any ideas, help, etc. would be appreciated.
Are those <img> pointing at the full-sized image file? I absolutely LOATHE sites that use full-size images and shrink them to thumbnail size. The load times are attrocious.
If they're actually thumbnail-sized images, you won't be able to use that url directly as your background url, as you'd just be stretching a small thumbnail-sized image to cover the window and get a hideous pixelized mess.
If the page is being dynamically generated, you'd want to create a JS array that contains the URLs of the full-sized image urls, so that when a thumbnail is clicked, you can get the fullsize url from that array. Or at least have a standardized naming convention so a simple string manipulation lets you turn the thumbnail url into a fullsize image url.
Once you've got that array, it's a simple matter to randomize a choice from it:
var imgs = ['/url/for/img1.jpg', '/url/for/img2.jpg', etc....];
$(document).ready(function() {
randomUrl = imgs[Math.round(Math.random() * (imgs.length - 1)) + 1];
$("body").css("background-image", 'url(' + randomURL + ')');
});