Как добавить изображение в элемент img во Vue?

Как можно сделать так, чтобы изображение img.png отображалось в Component.vue, не перемещая его внутрь папки components?
  • 2 апреля 2024 г. 15:59
Ответы на вопрос 2
Есть несколько способов добавить изображение в элемент img во Vue:

1. Вставить изображение непосредственно в HTML-разметку элемента img:

```html
<img src="путь_к_изображению">
```

2. Использовать привязку к динамическому свойству src с использованием директивы v-bind:

```html
<img :src="путь_к_изображению">
```

3. Хранить путь к изображению в свойстве data и использовать его для отображения:

```html
<img :src="imagePath">
```

```javascript
data() {
  return {
    imagePath: 'путь_к_изображению'
  }
}
```

Чтобы изображение img.png отображалось в Component.vue без перемещения внутрь папки components, можно указать путь до изображения относительно корня проекта, например:

```html
<img src="/src/assets/img.png">
```

Обратите внимание, что путь может варьироваться в зависимости от структуры проекта и настроек конфигурации сборки.
Засунуть путь к картинке в props компонента <br/> <br/> <pre><code class="javascript">Component.vue
&lt;script setup lang="ts"&gt;
const props = defineProps&lt;{
    imgSrc: string
}&gt;()
&lt;/script&gt;
&lt;template&gt;
    &lt;img :src="props.imgSrc" /&gt;
&lt;/template</code></pre> <br/> <br/> И при использовании компонента: <br/> <br/> <pre><code class="javascript">&lt;template&gt;
   &lt;component imgSrc="./assets/img.png" /&gt;
&lt;/template</code></pre>
Похожие вопросы