Flask server - no images found

New to Vue here. Attempting to use npm run build to run my app with Flask. It works except for images. When using npm run dev (and not Flask) everything works fine including the images.

I think this has to do with the interplay between webpacks and Flask but I am too new at all of this to understand it.

My file structure is as follows:

|__TopLevelDirectory (I believe this is Vue's root directory)
       ----index.html  (used by Vue development server)  

      |__ dist
            ---- build.js(created running ```npm run build```)
            ---- various .jpg and .svg files copied here automatically by npm run build.
      |__ src (I believe this is Flask's root directory)
           ----app.py  (Main Flask file)

          |__  assets
                  ----various .jpg and .svg files

          |__  components
                 ---- various .vue files
          |__  store
              ----store.js  (vuex store)

          |__  templates
              ----index.html  (Copied here because Flask will look for it here  I believe)
          |__  static

                  ----|__ js
                           ----build.js (copied here from /dist because Flask looks for it here I believe)

                   ----|__ styles

Again, everything works fine using npm run dev. In order to make things work in Flask I made a few changes:

  1. Copy index.html from /TopLevelDirectory to /TopLevelDirectory/src/templates
  2. Change paths referenced in /TopLevelDirectory/src/templates/index.html to reflect
    /src being being the Flask-centric root directory instead of /TopLevelDirectory.

Then I “run” app.py as you would for any Flask app and navigate to on my local browser
and the app is displayed. The problem is that the images are not present on the page and I get 404 erros that look like this:

"GET /dist/someRandomPicture.jpg?a24e9c16e56801d6498b90299c09c18a HTTP/1.1" 404 -"

So, the server is looking in the /dist directory to find someRandomPicture.jpg.
someRandomPicture.jpg was automatically copied from /assets into /dist by the npm run build.

How do I fix this?

So, since yesterday I have learned a few things that will not constitute an ‘answer’ to my question, but they may help someone else along that runs into this same problem.

Special thanks to Nick Janetakis who pointed to where to go.

In short, webpack is adding hashes to the names of my image files as it is instructed to do per the webpack.config.js file with this little bit of JS:

        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'

The answer is to either disable this hashing (which prevents you from taking advantage of certain benefits it provides when trying to update your cached assets) or to create a manifest.json file that will provide a translation service for your browser so that it recognizes the assets even though they have the md5 hash tag added to them.

This can be done manually I am sure (have not yet done this myself or I would post my file) or you can checkout a plugin that Nick wrote that solves this issue along with other. https://github.com/nickjj/flask-webpack.

OK, I figured I would post this answer for the next poor soul. Quick recap. I have been trying to run a Vue app on the Flask development server than includes images. It worked on the Vue development server but the images would not load when I attempted to run on the Flask server. I am using webpacks which bundles everything and copies it all (the build.js bundle file as well as the serveral images I am using) into a /dist folder.

–other stuff

Flask defaults to looking in the static directory, but since the whole project is just a wad of javascript in the /dist folder, this was not working.

The solution was very simple and makes me want to scream considering this is the third day I have been messing with it. On app.py change the default folder over to the /dist folder like this:

app = Flask(__name__, static_folder="../dist")

This made it work. Ugghhh…