Render local image in Vue component where image location is stored in data attribute

Question

I'm trying to render an image from my assets folder in a Vue project. The image displays when I hardcode it in using any of the following methods:

<img src="../assets/my_image.jpg"></img>
<img :src="require('../assets/my_image.jpg')"></img>
<img src="@/assets/my_image.jpg"></img>
<img :src="require('@/assets/my_image.jpg')"></img>

However I can't get the image to render I store that location in a data attribute called imgLocation, where imgLocation='../assets/my_image.jpg' or imgLocation='@/assets/my_image.jpg':

<img :src="imgLocation"></img>
<img :src="require(imgLocation)"></img>

The first element shows no image and logs nothing to the console. The second element shows the following errors in the console:

[Vue warn]: Error in render: "Error: Cannot find module '@/assets/my_image.jpg'"

Error: Cannot find module '@/assets/my_image.jpg' at webpackEmptyContext (eval at ./src/components sync recursive (app.js:6618), :2:10)

Any idea what I'm doing wrong here?

please check this stackoverflow.com/questions/53950105/…

Boussadjra Brahim
– Boussadjra Brahim

2019-01-06 22:46:53 +00:00
Commented Jan 6, 2019 at 22:46 — Boussadjra Brahim
– Boussadjra Brahim, Commented Jan 6, 2019 at 22:46

Husam Elbashir · Accepted Answer · 2019-01-06 22:45:23Z

3

In the second case the bindings are evaluated at run-time. You want the path to be resolved at build-time. So you should probably do imgLocation: require('../assets/my_image.jpg') or imgLocation: require('@/assets/my_image.jpg') in the data section of your component.

answered Jan 6, 2019 at 22:45

Husam Elbashir

7,1953 gold badges20 silver badges32 bronze badges

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

1 Comment

Husam Elbashir Over a year ago

@Boussadjra Thanks!

Collectives™ on Stack Overflow

Render local image in Vue component where image location is stored in data attribute

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related