access assets folder using a component url parameter

Question

I have a component that takes an image url as parameter. Within my component I use this url as an image path

<img :src="imgUrl" />

I consume this component using

<MyComponent imgUrl="@/assets/images/logo.png" />

When passing this parameter the image file is not found. I tried multiple ways and provide an example

https://codesandbox.io/s/6zmj1q5ypr

What needs to get fixed?

I don't know if this is important but I created my app with the Vue CLI so I use webpack

Cory Kleiser · Accepted Answer · 2018-12-15 21:09:55Z

2

Try importing in in your script and setting it as a data property then passing the data property in as the imgUrl.

<template>
  <div id="app">
    <my-component :imgUrl="image" />
    <router-view />
  </div>
</template>

<script>
import MyComponent from '@/components/MyComponent.vue'
import image from '@/assets/logo.png'

export default {
  name: 'App',
  components: {
    MyComponent
  },
  data() {
    return { image }
  }
}
</script>

You'll need to bind it to the property so make sure to precede imgUrl with :.

answered Dec 15, 2018 at 21:09

Cory Kleiser

2,0332 gold badges16 silver badges27 bronze badges

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

4 Comments

Moshe L Over a year ago

import image from '@/assets/logo.png' will not work as I know. the image can't be included with JS file ,except the base64 trick.

Cory Kleiser Over a year ago

@MosheL, webpack will handle this on compile. Please clone THIS REPO and follow README.md instructions. Thanks

avtomaton Over a year ago

You saved my day. I did not find any other way to return images as parameters in data() and letting vue to check the assets (like require did in 2.x)

Cory Kleiser Over a year ago

@avtomaton glad my answer helped you out. Maybe consider throwing me an upvote ;)

Collectives™ on Stack Overflow

access assets folder using a component url parameter

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related