Vue: unexpected token: ':' in image path-CodePudding

I'm passing an image path to a child Vue component but get:

unexpected token: ':' in https://path.to.image/image.jpg

I've created a Vue sandbox that illustrates the problem.

HTML

<div >
  <product-map
    :logo="https://path.to.image/image.jpg"
  />
</div>

Component

<template>
  <div>
    <img :src="image" />
  </div>
</template>

<script>
export default {
  props: {
    logo: {
      type: String,
      required: true,
    },
  },

  computed: {
    image() {
      return this.logo;
    },
  },
};
</script>

What am I doing wrong?

CodePudding user response：

Can you clarify what it is you're trying to do exactly? Because it's not entirely clear to me.

The error you're getting is coming from this:

<div >
  <product-map
    :logo="https://path.to.image/image.jpg"
  />
</div>

It's complaining about the : on the logo attribute. But I question why you're doing it this way to begin with. Typically you only want a single selector in index.html as the root of your app. Unless you're trying to have multiple Vue instances.

The way that you have your ProductMap component set up in your sandbox seems like it would accomplish what you're trying to do in index.html.