title: Webpack and React Image Not Found
body: <p>I have looked at <a href="https://stackoverflow.com/questions/46999422/error-adding-image-with-react-and-webpack">so</a> <a href="https://stackoverflow.com/questions/52208817/how-to-render-images-with-webpack-react">many</a> <a href="https://stackoverflow.com/questions/41775698/using-webpack-and-react-to-load-images">different</a> <a href="https://stackoverflow.com/questions/34582405/react-wont-load-local-images">resources</a> (<a href="https://stackoverflow.com/questions/42580130/display-images-in-react-using-jsx-without-import">some</a> <a href="https://stackabuse.com/serving-static-files-with-flask/" rel="nofollow noreferrer">not</a> <a href="https://stackoverflow.com/questions/45641827/unable-to-extract-image-file-uploaded-on-react-frontend-on-flask-backend?rq=1">linked</a>, and <a href="https://stackoverflow.com/questions/52481728/loading-local-images-with-webpack">this one</a> being the closest to my problem). None of them seem to solve my issue.</p>
  
  <p>I'm brand new to both React and Webpack. I found <a href="https://codeburst.io/creating-a-full-stack-web-application-with-python-npm-webpack-and-react-8925800503d9" rel="nofollow noreferrer">this tutorial</a> and followed it to create a basic website.</p>
  
  <p>However, I'm having issues displaying images. Instead of displaying the image, I get a "broken file" image and the console says <code>GET http://127.0.0.1:5000/public/images/smiley.png 404 (NOT FOUND)</code></p>
  
  <p>I have installed the Webpack image loader and I am using <code>require</code> in my React code. It looks like webpack is finding the image because if I change the name of the image I get an error like <code>Uncaught Error: Cannot find module '../images/smiley.png'</code> which crashes the whole website instead of the 404 error.</p>
  
  <p>This is my folder structure:</p>
  
  <p><a href="https://i.stack.imgur.com/j2JRq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/j2JRq.png" alt="folder structure"></a></p>
  
  <p>When I run the project with <code>npm run watch</code> and <code>python server.py</code> (from <code>static</code> folder and <code>server</code> folders respectively), a <code>public</code> folder with <code>smiley.png</code> inside of it appears inside of the <code>dist</code> folder.</p>
  
  <p>I have a hunch that the issue is that my Flask is configured in such a way that it does not respond the request because it thinks the <code>public</code> folder is off limits. But that's just a hunch, and I don't know how to fix it if that's the case.</p>
  
  <p>My code can be found <a href="https://github.com/Jadiker/image_issue_webpack_react_flask/tree/f9e0d1a8c318965c1bdc822dc5ea322deff30635" rel="nofollow noreferrer">here</a>. Any help would be appreciated.</p>
  
  <p>EDIT:</p>
  
  <p>Following my hunch, I added the following to my server.py:</p>
  
  <pre><code>@app.route("/public/&lt;path:path&gt;")
  def get_public_file(path):
      print("getting something from public: {}".format(path))
      return send_from_directory("public", path)
  </code></pre>
  
  <p>But that also did not work - I am still getting a 404.</p>
  
  <p>EDIT 2:</p>
  
  <p>Thanks to @Joost, we found out that using <code>app = Flask(__name__, static_folder="../static", template_folder="../static")</code> puts the image correctly at <code>http://127.0.0.1:5000/static/images/smiley.png</code>.</p>
  
  <p>However, this then causes Flask to not be able to figure out where <code>bundle.js</code> is, since it's located inside the <code>dist</code> folder.</p>
  
  <p>Adding in</p>
  
  <pre><code>@app.route("/dist/&lt;path:path&gt;")
  def get_dist_file(path):
      print("getting something from dist: {}".format(path)) # this ran
      return send_from_directory("dist", path)
  </code></pre>
  
  <p>to <code>server.py</code> did not help - I still get <code>GET http://127.0.0.1:5000/dist/bundle.js net::ERR_ABORTED 404 (NOT FOUND)</code> in the inspector.</p>
  
  <p>So now the trick is to figure out how to keep the smiley face served, and have flask serve the <code>bundle.js</code> file as well.</p>
  
  <p>EDIT 3:</p>
  
  <p>I just discovered a really sketchy way of getting it to work, so sketchy that I'm not even going to post it as an answer because I want something that's less sketchy.</p>
  
  <p>Using @Joost's <code>app = Flask(__name__, static_folder="../static", template_folder="../static")</code> and adding the following to <code>server.py</code> worked.</p>
  
  <pre><code>@app.route('/&lt;path:path&gt;')
  def static_file(path):
      print("getting static file {}".format(path))
      if path.startswith("public/"):
          path = "dist/" + path
          print("in public folder; path changed to: {}".format(path))
      return app.send_static_file(path)
  </code></pre>
  
  <p>The issue with this solution is that I really shouldn't be using <code>send_static_file</code> since it's extremely insecure, and that including an <code>if</code> statement like that seems prone to many errors. A different solution would be appreciated.</p>