How do you include an assets folder in a Vue file?

Question

I tried this (I'm using Vue's official Webpack template):

data () {
  photoEditorAssets: require('../assets/img/photoeditorsdk/assets'),
}

mounted () {
   var editor = new PhotoEditorSDK.UI.DesktopUI({ //eslint-disable-line
      container: container,
      assets: {
        baseUrl: this.photoEditorAssets // <-- This should be the absolute path to your `assets` directory
      }
    })
  }
}

However, I get this error:

Module build failed: Error: ENOENT: no such file or directory, open 'E:\alex\vreditor\src\assets\img\photoeditorsdk\assets'

Maybe the code is searching for a file called assets?

How to properly import a folder in a Vue file?

Note: Here's the structure of my project:

I'd just use the `static` folder. See https://stackoverflow.com/q/44959724/283366 — Phil, Nov 01 '17 at 03:28
@PhI get the same error: `Can't resolve '/static/photoeditorsdk/assets/'` https://i.stack.imgur.com/1W9dK.png — alex, Nov 01 '17 at 03:43

score 3 · Accepted Answer · answered Nov 01 '17 at 04:39

3

That's not how require() works. What you want is only the absolute path.

Simply something like this should work for you.

data () {
  photoEditorAssets: '../assets/img/photoeditorsdk/assets',
}

answered Nov 01 '17 at 04:39

Jacob Goh

19,800
5
53
73

I tried that but `photoEditorAssets` only becomes a string: `'../assets/img/photoeditorsdk/assets/'` – alex Nov 01 '17 at 06:38
@alex Exactly. It should be a string. A string that specify the path. – Jacob Goh Nov 01 '17 at 06:39
The url becomes like this: `http://localhost:8080/buildings/44fcb985-2e0c-44f6-9014-c053c2369908/assets/ui/desktop/editor/controls/focus/icon.png 404 (Not Found)` It injects itself in the current URL. – alex Nov 01 '17 at 06:41
This worked: `baseUrl: '/static/photoeditorsdk/assets' /` – alex Nov 01 '17 at 06:50

How do you include an assets folder in a Vue file?

1 Answers1