An unusual glitch encountered while trying to show an image

While working on my project using next.js and Tailwind, I encountered an issue with placing a logo in the upper right corner of the viewport. Interestingly, I was successful when using simple text for the logo.

However, when I attempted to display the logo using an img or svg tag, it failed to appear on the screen.

Even stranger, when I removed the text ('a' tag) from the code, the logo disappeared as well.

I'm puzzled by this behavior and can't figure out what could be causing it.

This works (but I prefer not to use text for the logo):

<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 (the logo doesn't show - only the 'a' tag has been removed):

<div className="fixed top-0 right-0 p-4">
      <img 
        alt="logo" 
        srcset="svg/logo_white.svg"/>
</div>

I am at a loss here. Can someone shed some light on this situation? Thank you!

htmlcssnext.jstailwind-css

Answer №1

Here is a suggested approach:

import Logo from 'next/image'
<div className="fixed top-0 right-0 p-4">
     <Logo src="svg/logo_white.svg" alt="logo" width="64" height="64" />
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Passing Parameters to Razor Pages Controller

Within my controller, there exists a function as follows: public ActionResult AddSubSub(int? idOfSubsub) { return RedirectToAction("Index", new { searchword = "" }); } I am able to invoke this function without providing any parameter. I attempted the ...

javascripthtmlasp.net-corerazor

Applying a CSS border to a div that perfectly encloses a span, adjusting to the

My goal is to create a nested structure where a div contains a span element like this: ---------- |Sentence| ---------- ----------------- |It's a looooong| |sentence | ----------------- While it works well for short sentences, long ones end u ...

htmlcss

Discover the power of Next.js by creating URLs with the format domain.com/category/post

I'm struggling to grasp the concept of dynamic URL routing that fits my specific needs, especially since most examples I find only cover structures like: domain.com/categories/category1, domain.com/posts/post-1. As indicated by the title, what I reall ...

reactjsroutesnext.js

Javascript isn't being executed by Internet Explorer as expected

I'm currently working on a web application that requires backend processing while simultaneously showing the information on the screen. AJAX seems like the ideal solution, so I've implemented it in my project. However, before initiating the AJAX ...

javascripthtmlajaxinternet-explorer

Begin the text movement from the left position, but shift it towards the right

If I have a table width of 100 pixels, I want to create a marquee effect where the text scrolls from right to left starting at 0 pixel position on the left side. The code below currently starts the text from the 100th pixel and moves from right to left: ...

javascripthtmlcss

Designs created with shapes using HTML, CSS, and JavaScript

I've been given a challenge to reproduce the image shown below using only HTML, CSS, and JS - without utilizing any image files. Initially, I thought about creating the shapes with HTML elements and CSS, but I realize this might not be the best approa ...

javascriptjquerycsshtml

Contrasting views when viewing content on localhost versus accessing it over a network

After creating a bootstrap web portal that appeared fine when viewed on my pc using Wampserver localhost, I encountered issues when accessing it through the office network. Apparently, elements that should have spanned horizontally were now spanning vertic ...

htmlcss

Excessive requests to location or history APIs in a brief period of time

Alert: Reached maximum update depth. This issue may arise when a component invokes setState within useEffect without a dependency array, or if any of the dependencies change on each render. const OwnerPage = () => { const onOpen = useAgencyModal((s ...

javascriptreactjsnext.jsreact-hooks

Include the component with the function getStaticProps loaded

I am currently working on a project using NextJs and I have created a component to load dynamic data. The component works fine when accessed via localhost:3000/faq, but I encounter an error when trying to import the same component into index.js. It seems l ...

javascriptreactjsnext.js

Combining Various Template Variables into a Single Variable in Django

I am facing a challenge in assigning multiple values from a dictionary to a variable within a Django template. For example: fruit.supplier = tesco fruit.color = blue {% with test=fruit.supplier_fruit.color %} {{ test }} {% endwith %} The expected ...

htmldjango

Utilize html5 to drag and drop numerous items effortlessly

Recently, I created a basic HTML5 drag and drop feature using JavaScript. However, I encountered an issue. function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ...

javascripthtmldrag-and-drop

The image hover feature is not functioning as expected in Angular 4

Currently, I am involved in a project using Angular 4. One particular section involves changing images on hover. Although I have implemented the following code, it does not seem to be functioning correctly for me. Interestingly, the same code works perfect ...

jqueryhtmlangular

What is the best way to display various tables depending on the grouping of a specific row value?

Recently, I came across some interesting JSON data that looks like this: [ { "fruit":"apple", "country": "A" }, { "fruit":"banana", "country": "b" }, { "fruit":&q ...

htmlangulartypescriptag-grid

limitations prevent accessing full content of parent div with .html() function

Currently, I am facing an issue where the `.html()` function in jQuery is not returning the complete content of a div. There are approximately 28 divs, each containing a large amount of data, but when I use the `.html()` function, it only returns 18 divs. ...

jqueryhtmljspdf

Switch up the like button for users who have previously liked a post

Greetings, I trust everything is going well. I am attempting to implement a feature where users can like a post or article created by others using a button. I have established a const function named "getAPostLikeRecord()," which retrieves a list of users w ...

javascriptcssreactjsfrontend

How can I prevent an InnerText from being empty in an If statement with PHP?

I need assistance with skipping empty InnerText and assigning a default value in my code. Here is the code snippet: if (strip_tags($result[$c]->innertext) == '') { $c++; continue; } Below is the output: https://i.stack. ...

phphtmlsimple-html-dom

Enhance your Next.js application with Instant Static Regeneration using Cloud

Our website, built using nextjs, currently includes a combination of Static pages, Server-Side Rendered pages, and dynamic pages. To address the growing build times, we are considering transitioning away from static generation to leveraging ISR instead. I ...

next.jsamazon-cloudfrontvercel

When I try to hover my mouse over the element for the first time, the style.cursor of 'hand' is not functioning as expected

Just delving into the world of programming, I recently attempted to change the cursor style to hand during the onmouseover event. Oddly enough, upon the initial page load, the border style changed as intended but the cursor style remained unaffected. It wa ...

javascripthtmlcss

Utilizing jQuery Mobile - Dividing content across multiple HTML files

In the process of developing a web application utilizing jQuery and jQuery mobile, I am aiming to display various pages. Given that the corresponding html-markup may become lengthy, I am interested in dividing the html into separate files. For instance: & ...

javascriptjqueryhtmljquery-mobile

Heroku NodeJS - Page Not Found: Error 404

I recently set up a Heroku server with BootBot running on it, but I'm facing challenges while trying to render an HTML page from it. Here is what I have in my code: var app = express(); var path = require('path'); app.use(express.static(pat ...

javascripthtmlnode.jsexpress