Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Jump to bottom

Failed to load the sidebar image and react logo image in the production build #52

Closed
4 tasks
bogere opened this issue May 28, 2019 · 10 comments · Fixed by #76
Closed
4 tasks

Failed to load the sidebar image and react logo image in the production build #52

bogere opened this issue May 28, 2019 · 10 comments · Fixed by #76

Comments

@bogere
Copy link

bogere commented May 28, 2019

!!! IF YOU DO NOT USE THIS ISSUES TEAMPLATE, YOUR ISSUE IS LIABLE TO BEING IGNORED BY US

Prerequisites

Please answer the following questions for yourself before submitting an issue.

  • I am running the latest version
  • I checked the documentation and found no answer
  • I checked to make sure that this issue has not already been filed
  • I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

I expect the sidebar image and react logo image at the top load normally in the production build.

Current Behavior

The sidebar image and react logo image cannot load in the production build, I can see the image not found in the browser console

Failure Information (for bugs)

Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

  1. npm run build
  2. Use any static server to serve the react build files
  3. you get it...

Context

who has managed to load the sidebar3.jpg image or react logo image at the top in the production build.
Everything works perfectly in the development mode but I had to make a couple of changes
to the index.html file and static\css\main.33ec52e9.css to ensure that pixel den icons
load properly and also javascript files in the production mode(build mode)
look at my current production index.html.

<link rel="manifest" href="manifest.json"><!doctype html><html lang="en"><head>
  <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,
  shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" 
  href="manifest.json"><link rel="shortcut icon" href="favicon.ico">
  <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon.png"><title>Biz Watch - Retailer</title>
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css"
   rel="stylesheet"><link href="//fonts.googleapis.com/css?family=Roboto:400,700,300" rel="stylesheet">
   <link href="static/css/main.33ec52e9.css" rel="stylesheet"></head>
   <body><noscript>You need to enable JavaScript to run this app.</noscript>
   <div id="root"></div><script type="text/javascript" src="static/js/main.964c9296.js"></script>
   </body></html>

css file

src:url(../media/Pe-icon-7-stroke.71394c0c.eot);
   src:url(../media/Pe-icon-7-stroke.71394c0c.eot?#iefixd7yf1v) format("embedded-opentype"),
   url(../media/Pe-icon-7-stroke.b38ef310.woff) format("woff"),
   url(../media/Pe-icon-7-stroke.01798bc1.ttf) format("truetype"),
   url(../media/Pe-icon-7-stroke.c45f7de0.svg#Pe-icon-7-stroke) format("svg");

//so how did u load the sidebar image becuase i have tried all tricks but all in vain..
yet the sidebar3.jpg is imported in the sidebar.jsx file so it must be automatically put in the
build folder after build process.

  • Device:
  • Operating System:
  • Browser and Version:

Failure Logs

Please include any relevant log snippets or files here.
@einazare
Copy link
Contributor

Hello there, @bogere ,

If you just delete the homepage prop from the package.json file, do you still have this issue?

Best,
Manu

@bogere
Copy link
Author

bogere commented May 31, 2019

yes, I had the same error for loading the font icons but i had to make changes to the css files for the font icons to load like this

src:url(../media/Pe-icon-7-stroke.71394c0c.eot);
   src:url(../media/Pe-icon-7-stroke.71394c0c.eot?#iefixd7yf1v) format("embedded-opentype"),
   url(../media/Pe-icon-7-stroke.b38ef310.woff) format("woff"),
   url(../media/Pe-icon-7-stroke.01798bc1.ttf) format("truetype"),
   url(../media/Pe-icon-7-stroke.c45f7de0.svg#Pe-icon-7-stroke) format("svg");

@bogere
Copy link
Author

bogere commented Jun 7, 2019

@einazare Have you had success with loading the sidebar image after making some modifications

@bogere
Copy link
Author

bogere commented Jun 15, 2019 •
edited
Loading

@einazare Have you had success with loading the sidebar image after making some modifications

How? Could i take look at your Sidebar.jsx file this part. (Components/Sidebar/Sidebar.jsx)

import imagine from "assets/img/sidebar-3.jpg"; import logo from "assets/img/reactlogo.png"; return (<div id="sidebar" className="sidebar" data-color="black" data-image={imagine} >)

@einazare
Copy link
Contributor

Hello there @bogere ,

How? Could i take look at your Sidebar.jsx file this part. (Components/Sidebar/Sidebar.jsx)

I don't understand your question. Can you please elaborate?

Best,
Manu

@bogere
Copy link
Author

bogere commented Jun 21, 2019

Does your sidebar.jsx file have the same code as one shown above before u ran npm run build

@einazare
Copy link
Contributor

Hello again, @bogere ,

Here is our Sidebar.jsx code: https://github.com/creativetimofficial/light-bootstrap-dashboard-react/blob/master/src/components/Sidebar/Sidebar.jsx

Best,
Manu

@bogere
Copy link
Author

bogere commented Jun 24, 2019

Thank you.. It is the same as sidebar.jsx that is on my machine... maybe i shall build on another computer and see how it behaves.

@einazare
Copy link
Contributor

Hello again, @bogere ,

What if you go inside src/assets/sass/lbd/_navbars.scss and change line width: calc(100% - $sidebar-width); with width: calc(100% - #{$sidebar-width}); do you still have your issue?

Best,
Manu

@bogere
Copy link
Author

bogere commented Jun 28, 2019

That solution was solving the failure to build the project(npm run build) but in my case , it is the sidebar image and react logo that are not loading in production mode, The funny thing is that when imported the profile image in web app, it worked perfectly even in production mode

@einazare einazare mentioned this issue Jun 16, 2020
Closed
einazare added a commit that referenced this issue Sep 24, 2020
@einazare
docs: add bug fixed
e4bd18e 
close #52
einazare added a commit that referenced this issue Jan 21, 2021
@einazare
docs: solve #52
1812aa3
@einazare einazare mentioned this issue Jan 21, 2021
Merged
# for free to join this conversation on GitHub. Already have an account? # to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Update Dependencies creativetimofficial/light-bootstrap-dashboard-react
2 participants
@bogere @einazare