Как импортировать картинку в component?
Делаю Карусель, не получается импортировать картинки, они находятся в " public/images/photo/Depositphotos.jpg"
Мой код
<template> <div> <el-carousel :interval="0" type="card" height="400px" width="7000px"> <el-carousel-item v-for="item in helPics" :key="item"> <!-- <h3 text="2xl" justify="center">{{ item }}</h3>--> <img src="item" width="100%" height="100%" /> </el-carousel-item> </el-carousel> </div> </template> <script> import imgs1 from '@/public/images/photo/Depositphotos.jpg' import imgs2 from './public/images/photo/f1fae.jpg' import imgs3 from '../public/images/photo/jiawei.jpg' export default { name: "AddCarouselComponent", components: [], data(){ return{ imgs1, helPics: [imgs1, imgs2, imgs3], } }, } </script> <style scoped> .el-carousel__item h3 { color: #475669; opacity: 0.75; line-height: 200px; margin: 0; text-align: center; } .el-carousel__item:nth-child(2n) { background-color: #99a9bf; } .el-carousel__item:nth-child(2n + 1) { background-color: #d3dce6; } </style> |
<template> <div> <el-carousel :interval="0" type="card" height="400px" width="7000px"> <el-carousel-item v-for="item in helPics" :key="item"> <!-- <h3 text="2xl" justify="center">{{ item }}</h3>--> <img src="item" width="100%" height="100%" /> </el-carousel-item> </el-carousel> </div> </template> <script> import imgs1 from '@/public/images/photo/Depositphotos.jpg' import imgs2 from './public/images/photo/f1fae.jpg' import imgs3 from '../public/images/photo/jiawei.jpg' export default { name: "AddCarouselComponent", components: [], data(){ return{ imgs1, helPics: [imgs1, imgs2, imgs3], } }, } </script> <style scoped> .el-carousel__item h3 { color: #475669; opacity: 0.75; line-height: 200px; margin: 0; text-align: center; } .el-carousel__item:nth-child(2n) { background-color: #99a9bf; } .el-carousel__item:nth-child(2n + 1) { background-color: #d3dce6; } </style>
Дополнительно:
Забыли дописать ))) <img :src="item" style="width:100%; height:100%"/>
Ответы:
<img src="/images/photo/Depositphotos.jpg" alt="" /> |
<img src="/images/photo/Depositphotos.jpg" alt="" />
- А, как их примерно так импортировать?
import imgs1 from '@/public/images/photo/Depositphotos.jpg'import imgs1 from '@/public/images/photo/Depositphotos.jpg'
- Snowyyy, надо смотреть куда ссылается @, либо храните в относительно src.
Разобрался, надо в "phpStorm ctrl+2 раза на пробел" и писать имя файла, так найдётся путь.
import imgs1 from '../../../../../public/images/photo/Depositphotos.jpg' import imgs2 from '../../../../../public/images/photo/f1fae.jpg' import imgs3 from '../../../../../public/images/photo/jiawei.jpg' |
import imgs1 from '../../../../../public/images/photo/Depositphotos.jpg' import imgs2 from '../../../../../public/images/photo/f1fae.jpg' import imgs3 from '../../../../../public/images/photo/jiawei.jpg'
Блин теперь не могу вывести их на экран.
Если так
<h3 text="2xl" justify="center">{{ item }}</h3>, то вывожу их путь
http://127.0.0.1:5173/public/images/photo/jiawei.jpg |
http://127.0.0.1:5173/public/images/photo/jiawei.jpg
, а если так, то ни чего не получаю <img :src="item" width="100%" height="100%"/>
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для импорта картинки в компонент React необходимо выполнить несколько шагов.
1. Создание папки с изображениями: сначала нужно создать папку внутри каталога вашего проекта, в которой будут храниться все изображения. Например, можно создать папку "images" в корне проекта.
2. Помещение изображения в папку: скопируйте нужное изображение в только что созданную папку. При этом важно убедиться, что путь к изображению правильный и не содержит ошибок.
3. Импорт изображения в компонент: в файле компонента, в котором вы хотите использовать изображение, выполните импорт изображения. Например, если вы используете JSX, импорт можно выполнить следующим образом:
import myImage from './images/myImage.jpg';
4. Использование изображения в компоненте: теперь вы можете использовать импортированное изображение в JSX вашего компонента. Например, чтобы отобразить изображение, можно использовать тег![]()
:
Таким образом, вы сможете импортировать и использовать изображения в ваших компонентах React, делая их более интересными и привлекательными для пользователей.