Skip to content
OverviewSolutions
5
Comments
1
jeff2266
@jeff2266

All comments

  • moAbayomi•200
    @moAbayomiSubmitted 12 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

    1
    jeff2266•150
    @jeff2266Posted 12 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
    1