What happens with vue when i pass

Question

I stuck with some strange behaviour in vue.

The result

The code

<template>
  <div class="container">
    <main class="messages">
      <message v-for="message in messages" v-bind="message" :key="message.id" />
    </main>
    <div class="send-message">
      <g-input v-model="message" :maxLength="80" @submit="sendMessage">
        <object type="image/svg+xml" data="assets/send-icon.svg" width="200" height="200">
          <img src="assets/send-icon.png" width="200" height="200" alt="image format png" />
        </object>
      </g-input>
    </div>
  </div>
</template>

g-input code

<template>
  <div class="root">
    <canvas ref="canvas" class="hide"></canvas>
    <textarea
      ref="input"
      class="input"
      type="text"
      :rows="lineCount"
      :maxlength="maxLength"
      :value="value"
      @input="handleInput"
      @keydown.prevent.enter="handleEnter"
    />
    <div ref="confirmButton" class="confirm-button">
      <slot></slot>
    </div>
    <span class="char-counter">{{ `${charCount}/${maxLength}` }}</span>
  </div>
</template>

I absolutely do not understand why this happens, can you please explain?

Is there a specific reason you are wrapping your `` in a svg ` — mousetail, Feb 01 '21 at 12:06
I choose object because this answer https://stackoverflow.com/a/4482962/12937539 — Gerpea, Feb 01 '21 at 12:09

score 1 · Answer 1 · answered Feb 01 '21 at 13:28

So I found how to avoid this

Just need to replace data attribute in object like this

<object type="image/svg+xml" :data="sendIcon" width="200" height="200">
    <img src="@/assets/send-icon.png" width="200" height="200" alt="image format png" />
</object>

Then in script tag we need to export icon

const sendIcon = require('@/assets/send-icon.svg')

export default {
  data: () => ({
    sendIcon: sendIcon,
  }),
}

But I still do not understand wht this is happens cause single <img> tag works just fine

<img src="@/assets/send-icon.svg" width="200" height="200" alt="image format png" />

And only <object> tag produce this behaviour and only with local url, some http url works fine

<object
    type="image/svg+xml"
    data="https://upload.wikimedia.org/wikipedia/commons/1/12/Black_Paw.svg"
    width="200"
    height="200">
    <img
        src="https://upload.wikimedia.org/wikipedia/commons/1/12/Black_Paw.svg"
        width="200"
        height="200"
        alt="image format png"
    />
</object>

1 Answers1