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!
Related
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'm trying to make a website using svelte and tailwind. I made a little popup that pops up when you hover over the home icon. But when I later added a div it pops up under the div and does not show fully. How do I fix this?
Code:
Div that popup goes under: (is in seprate svelte component and is imported in index.svelte.)
<div class="fixed ml-15 mb-auto w-screen h-10 bg-gray-700">
<h1 class="text-center text-white font-extrabold text-lg">Welcome.</h1>
</div>
Div for the one of the popups and icons: (this one is also in another separate svelte component and is imported in index.svelte.)
<div class="sidebar-icon group">
<a href="https://github.com/ratinchat" target="_blank">
<DiGithubBadge />
</a>
<span class="sidebar-tooltip group-hover:scale-100">Github</span>
</div>
Css for popup:
.sidebar-tooltip {
#apply absolute w-auto p-2 m-2 min-w-max left-14 rounded-md shadow-md
text-white bg-gray-900
text-xs font-bold
transition-all duration-100 scale-0 origin-left;
}
Helpfull images:
No popups
With popups
The home button popup is hidden under the topbar div.
How can I make it so that the popup (also named tooltip.) pops above the div instead of below. (specifically the home but what if I wanted to make more divs under?) Any help would be greatly appreciated.
Add the TailwindCSS class z-10 or higher to .sidebar-tooltip.
Without setting a z-index your elements will be rendered on the same plane as each other, causing overlaps to occur.
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>
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 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