Frontend Mentor | jeff2266's profile

@moAbayomi

Submitted 10 months ago

i really dont understand why the pictures wont work when you click on them ... it works on my local server and im really confused .. can anyone help me out here please? thanks.

tailwind-css

jeff2266• 150

@jeff2266

Posted 10 months ago

Hello moAbayomi!

The vite build process treats your product images as static assets, and will add hashes to their names. You can see how this happens by running a build ($ npm run build), then checking the names of your images in /dist/assets. So in your JS, when you update your image urls using string replace, you are not accounting for these hashes, the resulting urls will point to non-existent files.

To get the post-build url's (w/ hashes) of your images, you can import the images at the top of your javascript:

import imageProduct1 from './images/image-product-1.jpg'

Another solution would be to declare the ./images directory as a public directory in vite.config.js:

export default defineConfig({
  publicDir: './images'
})

After build, images in public directories can be referenced via the root directory. Further, files in the public directory will retain their filename (no hash added). So, wherever you reference ./images/*, you can instead reference ./*, and your string replace approach should still work.

Other notes, there are a few hover border effects in your header that cause elements to resize, and result in the page shifting. You may consider adding pseudo elements on hover and position them on top of the element which you mean to border:

<li class="sm:grid sm:justify-center sm:items-center after:block after:row-start-1 after:col-start-1 after:w-full sm:hover:after:h-1 after:bg-orange-dark after:self-end">
    <a class="font-bold sm:font-normal block py-4 sm:py-8 text-dark-gray-blue hover:text-dark-blue row-start-1 col-start-1" href="#"
        >Collections</a
    >
</li>

Or using the outline attribute, which will not add to an element's width or height:

<span
    class="w-[40px] h-[40px] rounded-full overflow-hidden flex justify-center items-center 
    border-2 border-transparent hover:border-solid hover:border-orange-dark cursor-pointer"
    ><img
        class="max-w-full"
        src="/images/image-avatar.png"
        alt="profile avatar"
></span>

I hope this helps, good luck!

Marked as helpful

jeff2266

All comments

tailwind-css