Using next.js and Tailwind, I'm trying to place a logo in the upper right corner of the viewport, which I do successfully if said logo is simply a text.
However, whenever I try to display the logo with an img or svg tag it simply doesn't show.
What's even weirder, is that if I keep the text ('a' tag), the logo shows underneath.
I don't know what I'm missing here.
This works (but I don't want the text):
<div className="fixed top-0 right-0 p-4">
<a className="transition duration-200 filter drop-shadow">
luna
</a>
<img
alt="logo"
srcset="svg/logo_white.svg"/>
</div>
This doesn't work (logo doesn't show - I only deleted the 'a' tag):
<div className="fixed top-0 right-0 p-4">
<img
alt="logo"
srcset="svg/logo_white.svg"/>
</div>
I can't seem to wrap my head around it. Can someone enlighten me? Thank you!
Please use this way
import Image from 'next/image'
<div className="fixed top-0 right-0 p-4">
<Image src="svg/logo_white.svg" alt="logo" width="64" height="64" />
</div>
Related
I'm trying to create a row of images and I have a container that uses half the width of the page and each image takes up a quarter of that half like this:
<div key={index} class="w-full mt-10 mb-16 md:mt-0 md:absolute md:top-[50%] md:-translate-y-[50%] md:flex md:space-x-10 space-y-5 md:space-y-0 items-start">
{/* Images */}
<div class="w-full sm:w-4/5 md:w-1/2 mx-auto md:mx-0">
<img src={row.image} alt="Product"></img>
<div class="mt-4 w-full flex space-x-5">
<img src="../images/placeholder.svg" alt="Product" class="w-1/4"></img>
<img src="../images/placeholder.svg" alt="Product" class="w-1/4"></img>
<img src="../images/placeholder.svg" alt="Product" class="w-1/4"></img>
<img src="../images/placeholder.svg" alt="Product" class="w-1/4"></img>
</div>
</div>
</div>
As you can see I have one large image above and 4 smaller images which I would like to align underneath. This currently gives this effect:
As you can see the bottom images overflow into the right-hand column. I don't want to overflow hidden or add a scrollbar but instead, I would like the images to be even sizes across this space, with a small gap inbetween. Like this example:
As you can see there's no overflow and the 4 images are even sizes and spaced underneath the image. This is the effect I would like to replicate. I'm currently using Tailwind CSS but a regular CSS explanation would work fine if anyone is unfamiliar with Tailwind.
From my understanding, there's nothing directly wrong with the code as each image does take up a 1/4, however, when I apply some margins to space them apart the images can shrink because they must maintain their 1/4 width. This then pushes the images to one side. I would like any suggestions for a clear approach to achieve the design in image two.
You can use flexbox for this.
Make sure the parent div have the properties:
display: inline-flex;
justify-content: space-evenly;
Then I believe your children/images should have this property to define its width:
flex-basis: 20%;
Take a look at this website for a quick flexbox reference.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
It's generally easier to put the images in their own column element, let the column handle the gaps, and then let the image fill the container. I'd do it this way:
<div key={index} class="w-full mt-10 mb-16 md:mt-0 md:absolute md:top-[50%] md:-translate-y-[50%] md:flex md:space-x-10 space-y-5 md:space-y-0 items-start">
{/* Images */}
<div class="w-full sm:w-4/5 md:w-1/2 mx-auto md:mx-0">
<img src={row.image} alt="Product"></img>
<div class="mt-4 w-full flex space-x-5">
<div class="w-1/4">
<img src="../images/placeholder.svg" alt="Product"></img>
</div>
<div class="w-1/4">
<img src="../images/placeholder.svg" alt="Product"></img>
</div>
<div class="w-1/4">
<img src="../images/placeholder.svg" alt="Product"></img>
</div>
<div class="w-1/4">
<img src="../images/placeholder.svg" alt="Product"></img>
</div>
</div>
</div>
</div>
Example playground link: https://play.tailwindcss.com/JQlTDnaFdd
Currently, my image is getting shown like this, but I want them to be circular and each of equal width and height.
They aren't square now and I have added the below CSS tailwind code but still am not getting them all in the circular.
<div className="cursor-pointer">
<div className="w-full overflow-hidden rounded-full mb-2 border border-black">
<img src={banner} alt={title} loading="lazy" className="w-full" />
</div>
<h3 className="text-sm md:text-lg font-medium ">{title}</h3>
</div>
I have tried different iterations with hard-coded height and width, but still am not able to figure out how to get ahead of it.
Any help is highly appreciated!!
EDIT:
On w-20 and h-20, the images get circular and on doing w-25 and h-25 they become disproportionate again. Any lead on why so?
And on adding w-20 and-20 the text isn't in the middle anymore. How can I fix that?
For tailwind, you can use the CSS for rounded-full on the image tag. You need to provide a fixed height and width to the image as well like
<img class="w-50 h-50 rounded-full" src="pic.jpg" alt="Rounded avatar">
Here is Leonardo DiCaprio below for you :)
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet" />
<img class="p-1 w-50 h-50 rounded-full ring-2 ring-gray-300 dark:ring-gray-500" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtyS3wBrnrkDXvhSo8SEXpvUXqXajtTSi9zD33IpKxAJHlijHnaY1pFT30NpaxxnP58PM&usqp=CAU" alt="Bordered avatar">
Give your image's parent div element the same width and length and make it rounded full,
use this tailwind classes
w-10 h-10 rounded-full
I have been working on this issue for like 4 hours now and I am coming up with nothing.
I want to be able to make a card element for my website, I want the background to be blurred but i want an image on top of that blurred image and text.
I am using tailwind and so far my attempts have blurred everything.
Here is my attempt
https://play.tailwindcss.com/PK2FXaIYx4?size=564x720
You will need to play around with position: relative and absolute. Also need filter: blue(px) on style attribute.
See a working example https://play.tailwindcss.com/qMDnmBi9Lo
<div class="w-80 h-96 relative">
<div class="absolute inset-0 z-0">
<img src="https://static.wikia.nocookie.net/jumanji/images/1/1b/Jumanji_2017_Poster.jpg/revision/latest/scale-to-width-down/1000?cb=20181023182751" alt="" srcset="" style="filter: blur(4px)" />
</div>
<div class="absolute inset-0 z-10">
<div class="flex flex-col transform scale-75 space-y-4">
<img src="https://static.wikia.nocookie.net/jumanji/images/1/1b/Jumanji_2017_Poster.jpg/revision/latest/scale-to-width-down/1000?cb=20181023182751" alt="" srcset="" />
<div class="text-white text-2xl text-center">Jumanji</div>
</div>
</div>
</div>
I'm really new on web development and I want to load an image. The image is found but not loaded for some reason.
This is what I mean when I say that the image is found:
This is part of my code (Stack Overflow is saying it is too big for the post):
<div class="flex flex-col flex-grow pt-4 pb-4 overflow-y-auto bg-white border-r border-gray-200">
<div class="flex items-center flex-shrink-0 px-4">
<img class="w-auto h-8" src="./exchange/resources/assets/img/logo/angel-lg.png" alt="Angel Logo">
</div>
<div class="flex flex-col flex-grow flex-shrink-0 mt-4">
...
And here's what's shown up on the screen:
I'm using Laravel Mix on this project. Thanks in advance.
Basically what's going on here is you have the wrong path for your image.
<img class="w-auto h-8" src="./exchange/resources/assets/img/logo/angel-lg.png" alt="Angel Logo"> <!-- src/path is wrong -->
What's displaying on the screen is the alt text, "Angel Logo", which means that the picture was not indeed found.
Can you provide the path of the image you are trying to display? (Right click on the image on your desktop and select "Copy path")
For some reason, the image' relative path (./) is the public folder. Thank you all!
I'm trying to get buttons to stretch across the screen with tailwind, but either they align left and don't stretch out (most cases), or - as in the current state of the code, they seem to stretch off the right hand side of the screen!
I'm sure I'm missing something obvious but can't see what it is. My header and footer stretch appropriately, and originally I just duplicated them, but as buttons, not divs.
Code (stretching off screen version) currently looks like this:
<body>
...
<div class="">
<div class="block">
<ul class="">
<li><button class="w-full bg-orange-200 hover:bg-orange-400 rounded-lg mx-6 my-4">
<div class="text-black text-lg content-center">
<h2 class="font-bold">Mike's big adventure</h2><br>
<div class="text-black text-base">Aargh, zombies!</div>
<div class="text-gray-600 text-xs">
<div>Created: 2020-03-24T12:57:01.753Z</div>
<div>Updated: 2020-03-24T13:00:06.411Z</div>
</div>
</div>
</button></li>
... more list items
</ul>
</div>
</div>
...
(Note, don't think it makes a difference, but the html is actually being generated by an Elm SPA)
How do I need to nest the various container, w-full, w-screen, button etc. and what combo do I need to get what I want?
Edit: This snippet isn't the only thing that isn't stretching. For example neither does the page header. The page footer, which is attached to the bottom of the screen, stretches all the way though ...
Header:
<div class="container flex-auto w-screen m-2">
<div class="w-full content-center bg-orange-500 rounded-lg">
<h1 class="font-bold text-5xl text-center">Header</h1>
</div>
</div>
Footer:
<div class="container flex-auto w-screen mx-2">
<div class="absolute inset-x-0 bottom-0 bg-orange-500 rounded-lg m-2">
<div class="m-4">Footer</div>
</div>
</div>
You should make the <li> full width since the button is nested in it and take the width of its parent which is the li. Add a w-full class.
Maybe also try adding a block class to the button as well
Add