Cómo cargar imágenes y mostrar imágenes en Vue3

El principio de cargar imágenes en Vue3 es el mismo que cargar imágenes en javascript. Vue tiene el método de escritura de Vue, pero en general sigue siendo el mismo.

No hay mucho que decir sobre el código:

<div id="contens">
        <p id="contens_TEXT" v-html="contens.introduction"></p>
    </div>
    <div id="title_Text">
        <h3>精彩评论</h3>
    </div>
    <div class="ListOfUsers_box" v-for="towText in towTexts" :key="towText">
        <div class="ListOfUsers">
            <img id="ListOfUsers_img" :src="towText.headimg" alt="">
            <div class="ListOfUsers_content">
                <p><b>{
    
    { towText.nickname }}</b></p>
                <p style="margin:0%">{
    
    { towText.content }}</p>
                <div style="display:flex;justify-content: space-around;">
                    <div style="width:60%;display: flex; justify-content: space-between;">
                        <!-- != null?towText.imag:'https://travel.kuxia.top/upload/20220902/b968cc55f9ff6679efd5b45e2dd89d30.jpg' -->
                        <img id="ListOfUsers_content_img" v-for="(towTextImg, index) in towText.image" :key="index"
                            :src="towTextImg" :onerror="errorimg" @click="imgTck(towText.image)" alt="">
                    </div>
                    <div class="but">
                        <van-button type="primary" @click="showt(towText.id, towText.nickname)">回复</van-button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 回复 -->
        <div class="comments">
            <div style="display:flex" v-for="commentsImg in towText.item" :key="commentsImg">
                <p><b>{
    
    { commentsImg.nickname }}</b></p>
                <p>{
    
    { commentsImg.content }}</p>
            </div>
        </div>
    </div>
    <van-action-sheet v-model:show="show" title="回复评论">
        <div class="content">
            <textarea name="" id="" cols="30" rows="10" v-model="reply" style="border:none"></textarea>
            <van-button type="primary" @click="clickTOW"
                style="display:flex;justify-content: center;width: 92%;margin-left: 4%;">提交评论</van-button>
        </div>
    </van-action-sheet>

    <!-- 晒照 -->
    <div class="tarbat">
        <div style="display:flex;flex-wrap: wrap; width:14%;margin-left:4%">
            <img v-show="likeS" style="width:30px;height:30px" src="../assets/dianzan.png" @click="giveAlike" alt="">
            <img v-show="like2" style="width:30px;height:30px" src="../assets/dianzan2.png" @click="giveAlikeTow"
                alt="">
            <p style=" margin:0%" @click="giveAlike">点赞</p>
        </div>
        <div style="width: 70%;display: flex;align-items: center;justify-content: center;">
            <van-button type="primary" @click="according"
                style="display:flex;justify-content: center;width: 85%;margin-left: 4%;border-radius : 50px 50px 50px 50px;">我要晒照</van-button>
        </div>
        <van-action-sheet v-model:show="showres" title="晒照">
            <div class="content">
                <textarea name="" id="" cols="30" rows="10" v-model="replyTow"></textarea>
                <van-uploader v-model="fileList" multiple :max-count="3" />
                <van-button type="primary" @click="accordingTow"
                    style="display:flex;justify-content: center;width: 92%;margin-left: 4%;">提交晒照</van-button>
            </div>
        </van-action-sheet>
    </div>
    <!-- 弹出图片 -->
    <van-image-preview v-model:show="showTow" :images="images" @change="onChange">
        <template v-slot:index>第{
    
    { index + 1 }}页</template>
    </van-image-preview>
</template>

<script setup>
import axios from 'axios';
import qs from 'qs';
import { Button } from 'vant';
import { ref } from 'vue'
// import router from '@/router';
import {
    useRouter,
    useRoute
} from "vue-router";
import { createApp } from 'vue';
const router = useRouter();
const route = useRoute();
const contens = ref('');
const userDatas = ref([]);
const towTexts = ref([])
const reply = ref('')
const replyTow = ref('')
const show = ref(false);
const showres = ref(false)
const showTow = ref(false);
var clickTOW;
var datase;
let errorimg = 'this.src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2023%2F0209%2Fa362b55ej00rprvbv010vd200rs00rsg00hx00hx.jpg&thumbnail=660x2147483647&quality=80&type=jpg"'

datase = () => {
    axios({
        method: "post", //请求方式
        url: "api/science/clockdetail ", //url
        data: qs.stringify({
            // 参数
            // placeid: route.query.id,
            scienceid: route.query.eventid
        }),
    }).then((res) => {
        console.log(res.data); //成功回调
        contens.value = res.data.info
        towTexts.value = res.data.coment
        console.log(towTexts.value);
    })
}
datase()

const images = ref([
    // 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    // 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
]);
const onChange = (newIndex) => {
    index.value = newIndex;
};
const imgTck = (Imgtow) => {
    showTow.value = true
    console.log(Imgtow);
    images.value = Imgtow

}

const index = ref(0);

const showt = (id, nickname) => {
    show.value = true
    clickTOW = () => {
        if (reply.value != '') {
            axios({
                method: "post", //请求方式
                url: "", //url
                data: qs.stringify({
                    // 参数
                   
                }),
            }).then((res) => {
                console.log(res.data); //成功回调
                datase()
            })
            show.value = false;
        }
    }
}

const fileList = ref([]);

const according = () => {
    showres.value = true
}
const accordingTow = () => {
    // 创建数据表单
    var data = new FormData();
    // let imgArrs = []
    for (let index = 0; index < fileList.value.length; index++) {
        let fileOne = fileList.value[index].file;
        data.append('file', fileOne) //这里就要使用我么在上面创建的from.DATA了将图片的数据放进去
        //图片上传
        axios({
            method: "post", //请求方式
            url: "", //url
            data: data // 参数
        }).then((res) => {
            console.log(res.data); //成功回调
            imgArrs.push(res.data.front_file)
            if (imgArrs.length == index + 1) {
                 //图片回显
                axios({
                    method: "post", //请求方式
                    url: "", //url
                    data: qs.stringify({
                        // 参数
               
                    })
                }).then((res) => {
                    console.log(userDatas.value.nickname);
                    console.log(userDatas.value.img);
                    console.log(route.query.eventid);
                    console.log(replyTow.value);
                    console.log(String(imgArrs));
                    console.log(res.data); //成功回调
                    datase()
                })
            }
        })
    }
    console.log(replyTow.value);
    showres.value = false
}
// 点赞
const gicealike = ref(false)
const likeS = ref(true)
const like2 = ref(false)
const giveAlike = () => {
    if (gicealike) {
        likeS.value = false
        like2.value = true
        like()
    }
}
const giveAlikeTow = () => {
    likeS.value = true
    like2.value = false
}

const like = () => {
    axios({
        method: "post", //请求方式
        url: "", //url
        data: qs.stringify({
            // 参数
          
        }),
    }).then((res) => {
        console.log(res.data); //成功回调
        like.value = false
        like2.value = true
    })
}
</script>

<style>
body {
    background-color: rgba(241, 241, 241, 1);
}

.title_tows {
    width: 100%;
    height: 2.5rem;
    background-color: cornflowerblue;
}

.list_tow_list {
    width: 100%;
    /* height: 100ch; */
    margin-top: 1%;
}

#img_imaget {
    position: absolute;
    width: 1.875rem;
    height: 1.875rem;
    top: 1%;
}

.listetows {
    background-color: #fff;
    box-shadow: 0.125rem 0.1875rem;
    width: 94%;
    margin-left: 3%;
    border-radius: 5%;
    margin-top: 2%;
}

#img_images {
    width: 94%;
    height: 8.75rem;
    border-radius: 5%;
    margin-left: 3%;
    margin-top: 2%;
}

.title_tows_text {
    width: 100%;
    height: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}

#contens {
    width: 94%;
    margin-left: 3%;
    background-color: #fff;
    border-radius: 4%;
}

#contens_TEXT {
    width: 94%;
    margin-left: 3%;
    padding: 1%;
}

#title_Text {
    width: 94%;
    background-color: #fff;
    height: 40px;
    margin: 3%;
    border-radius: 10px 10px 10px 10px;
}

#title_Text h3 {
    width: 96%;
    margin: 0%;
    margin-left: 2%;
    display: flex;
    height: 40px;
    align-items: center;
}

.ListOfUsers_box {
    width: 94%;
    margin: 3%;
    background-color: #fff;
    position: relative;
    border-radius: 10px 10px 10px 10px;
    height: auto;
    padding-bottom: 1%;
}

.ListOfUsers {
    display: flex;
}

#ListOfUsers_img {
    width: 20%;
    height: 20%;
    margin-left: 2%;
    margin-top: 2%;
}

.ListOfUsers_content {
    width: 100%;
    margin-left: 2%;
    height: 30%;
}

#ListOfUsers_content_img {
    width: 30%;
    height: 55px;
}

.comments {
    margin-left: 25%;
    height: auto;
    width: 70%;
    margin-top: 2%;
    margin-bottom: 2%;
    background-color: rgb(241, 241, 241);
    border-radius: 10px 10px 10px 10px;
}

.comments p {
    margin: 0%;
    padding: 5%;
    border-radius: 10%;
}

.but {
    margin-left: -10%;
    margin-top: 5%;
}

.content {
    padding: 16px 16px 60px;
}

.content textarea {
    width: 100%;
    height: 70%;
}

.tarbat {
    width: 100%;
    height: 60px;
    background-color: rgb(249, 249, 249);
    position: fixed;
    bottom: 0%;
    display: flex;
    justify-items: center;
    justify-content: space-around;
}
</style>

El principio general es utilizar la interfaz de carga de imágenes para obtener primero la imagen y convertirla en una cadena. La página de eco es muy simple, es decir, coloque la ruta después de cargar la imagen en la función fromdata creada. (Solo necesita poner el enlace en la dirección URL.) Los componentes utilizados deben descargarse .