Как импортировать картинку для img в vue?
В общем расположение такое
- src - assets - img.png - components - Component.vue - App.vue |
- src - assets - img.png - components - Component.vue - App.vue
Component.vue
<template> <img src="../assets/img.png" </template |
<template> <img src="../assets/img.png" </template
App.vue
<template> <img src=". /assets/img.png"> </template> |
<template> <img src=". /assets/img.png"> </template>
В App.vue, что и понятно, все работает, но не в Component.vue
Можно ли как то обойтись без перемещения картинки в components?
Дополнительно:
Ответы:
Засунуть путь к картинке в props компонента
Component.vue <script setup lang="ts"> const props = defineProps<{ imgSrc: string }>() </script> <template> <img :src="props.imgSrc" /> </template |
Component.vue <script setup lang="ts"> const props = defineProps<{ imgSrc: string }>() </script> <template> <img :src="props.imgSrc" /> </template
И при использовании компонента:
<template> <component imgSrc="./assets/img.png" /> </template |
<template> <component imgSrc="./assets/img.png" /> </template
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для импорта картинки для тега img во Vue.js, вы можете использовать специальный синтаксис, который позволяет вам импортировать изображения прямо в компонент Vue. Вот как это сделать:
1. Сначала вам нужно создать папку "assets" внутри папки вашего проекта Vue, если у вас ее еще нет. В этой папке вы будете хранить все ваши изображения.
2. Поместите изображение, которое вы хотите импортировать, в папку "assets".
3. Теперь вам нужно импортировать это изображение в ваш компонент Vue. Для этого вам нужно использовать специальный синтаксис импорта изображения в JavaScript:
```html
<div> <img alt="My Image"> </div> export default { data() { return { image: require('@/assets/my-image.jpg') }; } };
```
4. Обратите внимание на использование синтаксиса `require('@/assets/my-image.jpg')`. Здесь `@` обозначает корень вашего проекта, так что если ваша папка "assets" находится в корне проекта, вы можете использовать этот путь.
5. Теперь изображение будет импортировано и отображено в вашем компоненте Vue.
6. Не забудьте также убедиться, что вы правильно настроили конфигурацию Webpack для загрузки изображений. В большинстве случаев это уже настроено по умолчанию в проекте Vue CLI, но если у вас возникнут проблемы, проверьте конфигурацию Webpack.
Следуя этим шагам, вы сможете легко импортировать и отображать изображения для тега img в ваших компонентах Vue.