Images do not seem to show up on GitHub pages

I've been grappling with the issue of images not showing up on Github pages for two days now. I've scoured the internet and attempted all suggested solutions. Could you please provide me with a step-by-step guide, and if possible, include a screenshot? The solution involving '../' seems to be ineffective for me, and I'm unsure where to place it. Should I make edits in the index.html file within the repository itself, or should I edit the local file on my desktop before uploading it? I've double-checked my spelling and capitalization, they are accurate.

For reference, here is the link to the repository: https://github.com/biqrar/Responsive-QR-Code-card.git

cssbootstrap-4htmlelements

Answer №1

Upon my observation, it appears that the image file is located in the same directory as the index file. Therefore, only the file name should be used as the source path for the image.

<img src="image-qr-code.png"
      class="card-img-top mt-2 px-2 py-2 mb-2"
      alt="QR-code"
/>

Answer №2

https://i.sstatic.net/3Zf9N.png

It seems like there might be a misunderstanding in your question, could it be that the issue lies in the incorrect path to the image file? In your repository, both the qr png image and your webpage are located in the same directory. Therefore, modifying line 32 of index.html to 

src="image-qr-code.png"
should solve the problem and display the image correctly.

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

Change the background color of all cells in a Bootstrap table by hovering over a single cell

Here is the code for a bootstrap table: <body leftmargin="0" topmargin="0" bgcolor="#ffffff" marginheight="0" marginwidth="0"> <div class="container-fluid h-100"> <div class="row float-right align-items-center" style="height: 5%;"> ...

javascriptjqueryhtmlcssbootstrap-4

Clicking a button causes the entire HTML body to shift

My current webpage setup is quite simple, featuring a drop-down menu that appears upon clicking a button. However, when the button is clicked, the drop-down menu suddenly shifts the entire contents of the page. I'm unsure of what's causing this i ...

jqueryhtmlcssbuttondrop-down-menu

Ways to avoid text covering the button using CSS

Take a look at this image: https://i.sstatic.net/U7wGV.png In the image, you can see that I have entered text in the input box. However, since there is also a button placed inside the box, the text gets hidden behind it. Is there a way to prevent this i ...

htmlcss

Is it possible to generate an HTML element by utilizing an array of coordinates?

I have a set of 4 x/y coordinates that looks like this: [{x: 10, y: 5}, {x:10, y:15}, {x:20, y:10}, {x:20, y:20}] Is there a way to create an HTML element where each corner matches one of the coordinates in the array? I am aware that this can be done usi ...

javascripthtmlcss

Utilizing ngClass and Bootstrap 4 for dynamic styling, fetching class values from Firebase through AngularFire2

Need assistance with retrieving values from Firebase and dynamically sending them to ngClass. Here is my current implementation without Firebase (local only), which is functioning correctly: header.component.html <h3>Header Background:</h3> & ...

twitter-bootstrapangularfirebaseangularfire2bootstrap-4

Adjust the height of the div container and implement a vertical scroll feature on the fixed element

I created a fiddle and was hoping to enable scrolling, but I have been unable to find a solution. http://jsfiddle.net/sq181h3h/3/ I tried both of these options, but nothing seems to be working: #league_chat { overflow-y:scroll; } #league_chat { ...

css

How to Use Jquery to Deactivate a Div with a Background Color

Currently, I have a div that contains several child divs. My goal is to disable the parent div and all of its children, showing them in gray color. I initially tried using the CSS property opacity, but unfortunately, the background color didn't change ...

jqueryhtmlcss

Enhance your DIV boxes with a stylish shadow effect when hovering over them

I am in the process of exploring a method to create a shadow animation when each box on the homepage of my website () is hovered over. I envision the animation to be similar to what is demonstrated on this page: . I have referred to this page as a guide to ...

htmlcssanimationhovershadow

Different options exist for top layers with flexible widths aside from using position: absolute

The only method I'm aware of to place a layer on top is by using position: absolute. https://i.sstatic.net/R4j8i.jpg (favoring top, disliking bottom) However, this approach often prevents dynamic scaling with the rest of the page. You can attempt ...

htmlcss

Tips for changing the height of the arrows in a Bootstrap carousel

After adjusting the height of the .well class, something unexpected happened: https://i.sstatic.net/75KCB.jpg Despite my attempts to change the height for various controls and elements within the carousel, including the carousel itself, I was not seeing ...

htmlcssbootstrap-4

The subdirectory containing the Rails assets is causing loading issues in the production environment

My event CSS is currently located in app/assets/stylesheets/pages/events.scss. Surprisingly, everything looks perfect in development mode with all the assets loading properly. However, the real issue arises when I switch to production as it seems like thes ...

cssruby-on-railsproduction-environment

Encountering a ModuleBuildError while setting up Tailwind CSS in Laravel 8

I am currently learning Laravel version 8 and encountered an issue while trying to install Tailwind CSS using the npm command. npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 Here is a detai ...

cssnpmlaravel-mixtailwind-csslaravel-8

Exploring React's Primary Button Color Implementation

I am attempting to customize the buttons in my theme for various states such as contained, primary, and hover. However, my current approach is not yielding the desired results. VIEW CODESANDBOX DEMO: CLICK HERE theme/overrides/MuiButton.js import palet ...

cssreactjsmaterial-uijss

Looking to create a sophisticated HTML table design

Struggling to design an HTML table like the one shown in the attachment below due to a lack of understanding. My attempt so far is far from satisfactory, seeking guidance to point me in the right direction. <section class="mb-5"> <div ...

htmlbootstrap-4

Guide to customizing WordPress header menu buttons with CSS, excluding a specific button

I need help with custom CSS for my WordPress site. I want to apply a hover effect to all menu buttons except for the "Contact" button, which already has its own styling. The CSS code adds a growing line beneath the hovered menu item and a static line unde ...

htmlcsswordpresscustom-wordpress-pages

Apply a custom CSS class to every `tr` element that includes a particular value

I'm attempting to assign a class to a tr element (last_value_row) in a form when the target value in the first td of the last_value_row element is "New Target". Currently, only the first element will have the class added, while all other elements with ...

javascripthtmlcssdjangodjango-templates

CSS3 Internet Explorer 6 problem

In Firefox, the following code works fine as I am using CSS3 to create rounded borders. Can someone please advise on what changes are needed to achieve the same result in IE6? Here is the code: <html> <head> <style type="text/css"> bac ...

htmlinternet-explorer-6cssrounded-corners

Incorrect item triggered in Bootstrap 4 dropdown menu

I'm currently tackling an issue with a navigation bar that includes two items with drop-down menus. The first drop-down works flawlessly, but the second one always ends up triggering the first. I've conducted tests after removing any additional s ...

htmlcssbootstrap-4dropdown

Deactivate toggle effect by clicking on a different link

My existing JavaScript code changes the background color of a link when it is clicked: $(".button").click(function(){ $(this).css('background-color', '#555'); }); While this functionality works, I am looking to have the color tog ...

javascriptjqueryhtmlcsstoggle

Reorganize CSS properties within a Json object

I am experiencing difficulties rearranging my sortable divs using jQuery. After moving the divs and saving their ID, top, and left positions, I retrieve data from a JSON file. However, when I try to move the divs back to their saved positions, I encounte ...

jqueryhtmlcssjson