Как импортировать картинку в component?

Question

[Snowyyy]

Делаю Карусель, не получается импортировать картинки, они находятся в " 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>

Answer 1

[Newcomer_i]

Забыли дописать ))) <img :src="item" style="width:100%; height:100%"/>

Answer 2

[Александр]

<img src="/images/photo/Depositphotos.jpg" alt="" />

Comments

[Snowyyy]

А, как их примерно так импортировать?

import imgs1 from '@/public/images/photo/Depositphotos.jpg'

[Александр]

Snowyyy, надо смотреть куда ссылается @, либо храните в относительно src.

Answer 3

[Snowyyy]

Разобрался, надо в "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'

Блин теперь не могу вывести их на экран.
Если так
<h3 text="2xl" justify="center">{{ item }}</h3>, то вывожу их путь

http://127.0.0.1:5173/public/images/photo/jiawei.jpg

, а если так, то ни чего не получаю <img :src="item" width="100%" height="100%"/>