How to access an image in Vue src folder using JS

Question

I have a Vue app where I want to access some image files in an included JS file for various purposes, e.g. one of which is adding images to a canvas element.

This would normally be easy using something like the following:

function getImage() {
  let img = new Image();
  img.src = '/assets/images/bg.jpg';
  img.onload = function () {
    //
  };
}

I can technically access images in my public folder this way, but what if I want to access compiled image assets from my src folder rather than public folder?

In CSS I can simply use an @ symbol in the path like @/assets/images/bg.jpg (as this is configured as an alias in the vue config) so I tried...

img.src = '@/assets/images/bg.jpg';

...but this doesn't work.

Is there a way to achieve this, or is what I'm trying not possible? Perhaps assets referenced purely in JS aren't included in the build process? Thanks

Usually you don't want to put images in the src directory, as that gets 'compiled' into your bundle. Could you not put the assets within public? — Alicia Sykes
– Alicia Sykes, Commented Apr 12, 2022 at 16:26
@Lissy93 if it's the only option then yeah, I just normally have my image assets in src - it's useful if any get updated as when building they get given unique file names etc. — Alex
– Alex, Commented Apr 12, 2022 at 16:32
Did either of the below answers help? If so, you should accept one, and if not, you should specify more details as to what's still not working. — Alicia Sykes
– Alicia Sykes, Commented May 3, 2022 at 12:31

Alicia Sykes · Accepted Answer · 2022-04-12 16:38:19Z

1

Tried this out, and it does in fact work.

<img src="@/assets/my-image.png" />

However since this is compiled, you won't be able to set / change the image src dynamically with JS like you're doing in your example above.

answered Apr 12, 2022 at 16:38

Alicia Sykes

7,3828 gold badges39 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alex Over a year ago

Yeah, this works in CSS and inline HTML, but not in JS unfortunately - looks like what I wanted may not be possible.

Romalex · Accepted Answer · 2022-04-12 20:12:39Z

0

With webpack you can do this:

img.src = require('@/assets/images/bg.jpg');

During the build it will be replaced with a path to the compiled asset.

answered Apr 12, 2022 at 20:12

Romalex

1,84815 silver badges16 bronze badges

1 Comment

Alex Over a year ago

This results in the error Uncaught ReferenceError: require is not defined I guess Vue is limited to only ES module imports.

Collectives™ on Stack Overflow

How to access an image in Vue src folder using JS

2 Answers 2

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Linked

Related