vue2 img src 无法显示问题

于 2024-07-05 15:10:28 发布
阅读量227 收藏
点赞数 3
文章标签： c# 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guoruijun_2012_4/article/details/140209500
版权

1、页面标签这样写

<img :src="pdf2wordUrl" alt="Image">

2、data这样定义

pdf2wordUrl: imgOff,

3、import这样写

    import imgOn from '../../assets/on.png'
    import imgOff from '../../assets/off.png'

4、转换代码

                if (type == 'pdf2word') {
                    this.convertTitle = 'pdf 转换 word'
                    this.turnOff()
                    this.pdf2wordUrl = imgOn
                }

完整代码参考

<template>
    <div class="body">
        <div class="zhanwei" v-if="zhanwei"></div>
        <div style="height: 60px"></div>
        <div class="content">
            <div class="title">
                <div @click="tabChange('pdf2word')" id="div1">
                    <img :src="pdf2wordUrl" alt="Image">
                    pdf转换Word &nbsp;&nbsp;&nbsp;
                    <a-divider dashed/>
                </div>
                <div @click="tabChange('pdf2excel')" id="div2">
                    <img :src="pdf2excelUrl" alt="Image">
                    pdf转换Excel &nbsp;&nbsp;&nbsp;
                    <a-divider dashed/>
                </div>
                <div @click="tabChange('pdf2ppt')" id="div3">
                    <img :src="pdf2pptUrl" alt="Image">
                    pdf转换PPT &nbsp;&nbsp;&nbsp;
                    <a-divider dashed/>
                </div>
                <div @click="tabChange('pdf2jpg')" id="div4">
                    <img :src="pdf2jpgUrl" alt="Image">
                    pdf转换图片 &nbsp;&nbsp;&nbsp;
                    <a-divider dashed/>
                </div>
                <div @click="tabChange('pdf2html')" id="div5">
                    <img :src="pdf2htmlUrl" alt="Image">
                    pdf转换Html &nbsp;&nbsp;&nbsp;
                    <a-divider dashed/>
                </div>
                <div @click="tabChange('pdf2text')" id="div6">
                    <img :src="pdf2textUrl" alt="Image">
                    pdf转换Text &nbsp;&nbsp;&nbsp;
                    <a-divider dashed/>
                </div>
            </div>
            <div class="upload">
            </div>
            <div class="text-pdf">
                {{convertTitle}}
            </div>
            <div class="text-pdf-file">
                将文件拖到此处，或点击选择文件按钮，小于100MB，请不要上传电子书等存在侵权的资源！
            </div>
            <div class="text-pdf-file">
                <input @change="handleFileUpload" class="button-add" type="file">
                <a-button :block="true" @click="pdf2word()" class="button-pro" style="text-align: center"
                          type="primary">
                    开始处理
                </a-button>
            </div>
        </div>
    </div>
</template>
<script>
    import PermissionModal from './modules/PermissionModal'
    import GlobalFooter from '@/components/page/GlobalFooter'
    import { JeecgListMixin } from '@/mixins/JeecgListMixin'
    import PermissionDataRuleList from './PermissionDataRuleList'
    import JEllipsis from '@/components/jeecg/JEllipsis'
    import http from '@api/url'
    import imgOn from '../../assets/on.png'
    import imgOff from '../../assets/off.png'
    export default {
        name: 'pdf2excel',
        mixins: [JeecgListMixin],
        components: {
            PermissionDataRuleList,
            PermissionModal,
            GlobalFooter,
            JEllipsis
        },
        data() {
            return {
                consoleText: '',
                file: null,
                timer: null,
                zhanwei: false,
                aLiModeData: {
                    'model': 'wanx-v1',
                    'input': {
                        'prompt': '一只奔跑的猫'
                    },
                    'parameters': {
                        'style': '<sketch>',
                        'size': '1024*1024',
                        'n': 1,
                        'seed': 42,
                        'strength': 0.5,
                        'ref_mode': 'repaint'
                    }
                },
                otherModeData: {
                    modelKey: '',
                    prompt: '',
                    sizeIndex: 0,
                    styleIndex: 0,
                },
                userShow: true,
                image1: 'require(\'@/assets/on.png\')',
                image2: 'require(\'@/assets/off.png\')',
                currentImage: '',
                pdf2wordUrl: imgOff,
                pdf2excelUrl: imgOff,
                pdf2pptUrl: imgOff,
                pdf2jpgUrl: imgOff,
                pdf2htmlUrl: imgOff,
                pdf2textUrl: imgOff,
                aLiModeData: {
                    'url': '',
                },
                aLiDocFind: {
                    'id': '',
                },
                flag: '0',
                convertTitle: 'pdf 转换 word'
            }
        },
        mounted() {
            // 添加滚动事件监听
            window.addEventListener('scroll', this.handleScroll)
            this.currentImage = this.image1
        },
        beforeDestroy() {
            // 移除滚动事件监听
            window.removeEventListener('scroll', this.handleScroll)
        },
        methods: {
            handleScroll() {
                // 处理滚动事件
                if (window.scrollY >= 20) {
                    this.zhanwei = true
                } else {
                    this.zhanwei = false
                }
            },
            handleFileUpload(event) {
                this.file = event.target.files[0]
            },
            submitFile() {
                if (!this.file) {
                    alert('请选择一个文件')
                    return
                }
                const formData = new FormData()
                formData.append('file', this.file)
            },
            pdf2word() {
                const formData = new FormData()
                formData.append('file', this.file)
                http.post('/upload/file', formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                })
                    .then((response) => {
                        console.log('pdf2word response data：', response)
                        console.log('pdf2word response data：', response.data.url)
                        // 处理响应
                        this.aLiModeData.url = response.data.url
                        this.pdf2wordByaliyunProcStepOne()
                    })
                    .catch((error) => {
                        console.log(error)
                    })
            },
            pdf2wordByaliyunProcStepOne() {
                //调用阿里云api开始处理
                http.post('/concert/pdfToWord', this.aLiModeData)
                    .then((response) => {
                        console.log('concert/pdfToWord 9999：', response)
                        this.aLiDocFind.id = response.data.data.body.Data.Id
                        this.pdf2wordByaliyunProcStep02()
                    })
                    .catch((error) => {
                        console.log(error)
                    })
            },
            pdf2wordByaliyunProcStep02() {
                //this.aLiDocFind.id = 'docmind-20240704-e0c78c564b7f4da9820774ef3e008bff'
                http.post('/getConvertResult/GetDocumentConvertResult', this.aLiDocFind)
                    .then((response) => {
                        console.log('-----------------monitor start------', response.data.data.body.Completed)
                        if (response.data.data.body.Completed.toString() == 'false') {
                            console.log('-----------------monitor start------')
                            this.monitor()
                        } else {
                            // clearInterval(this.timer); // 销毁组件前清除定时器
                            //alert("clearInterval time");
                            clearInterval(this.timer)
                            console.log('-----------------finish------', response)
                            console.log('-----------------finish------', response.data.data.body.Data[0].Url)
                            // 打开一个新窗口或新标签，并导航到指定的URL
                            //window.open(response.data.data.body.Data[0].Url, '_blank')
                        }
                    })
                    .catch((error) => {
                        console.log(error)
                    })
            },
            monitor() {
                //执行需要定时重复执行的任务
                this.timer = setInterval(() => {
                    console.log('timer start ')
                    this.pdf2wordByaliyunProcStep02()
                }, 2000) // 每2秒钟执行一次
            },
            tabChange(type) {
                if (type == 'pdf2word') {
                    this.convertTitle = 'pdf 转换 word'
                    this.turnOff()
                    this.pdf2wordUrl = imgOn
                }
                if (type == 'pdf2excel') {
                    this.convertTitle = 'pdf 转换 excel'
                    this.turnOff()
                    this.pdf2excelUrl = imgOn
                }
                if (type == 'pdf2ppt') {
                    this.convertTitle = 'pdf 转换 ppt'
                    this.turnOff()
                    this.pdf2pptUrl = imgOn
                }
                if (type == 'pdf2jpg') {
                    this.convertTitle = 'pdf 转换 jpg'
                    this.turnOff()
                    this.pdf2jpgUrl = imgOn
                }
                if (type == 'pdf2html') {
                    this.convertTitle = 'pdf 转换 html'
                    this.turnOff()
                    this.pdf2htmlUrl = imgOn
                }
                if (type == 'pdf2text') {
                    this.convertTitle = 'pdf 转换 text'
                    this.turnOff()
                    this.pdf2textUrl = imgOn
                }
            },
            turnOff() {
                this.pdf2wordUrl = imgOff
                this.pdf2excelUrl = imgOff
                this.pdf2pptUrl = imgOff
                this.pdf2jpgUrl = imgOff
                this.pdf2htmlUrl = imgOff
                this.pdf2textUrl = imgOff
            },
            turnOn() {
                this.pdf2wordUrl = imgOn
                this.pdf2excelUrl = imgOn
                this.pdf2pptUrl = imgOn
                this.pdf2jpgUrl = imgOn
                this.pdf2htmlUrl = imgOn
                this.pdf2textUrl = imgOn
            },
            // 上传图片
            handleChange(info) {
                const status = info.file.status
                if (status !== 'uploading') {
                    // console.log(info.file, info.fileList);
                }
                if (status === 'done') {
                    this.$message.success(`${info.file.name} file uploaded successfully.`)
                } else if (status === 'error') {
                    this.$message.error(`${info.file.name} file upload failed.`)
                }
            }
        }
    }
</script>
<style lang="less" scoped>
    .zhanwei {
        //background-color: #ffffff;
        width: 100%;
        height: 110px;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 8;
        background: url(../../assets/imgs/home_backCopy.png) no-repeat 100%;
        /*background-image: url("assets/imgs/home_backCopy.png");*/
        background-size: 100%;
    }
    .content {
        width: 1700px;
        border-radius: 10px;
        opacity: 1;
        background: rgba(255, 255, 255, 0.5);
        box-sizing: border-box;
        border: 1px solid #FFFFFF;
        margin: auto;
        padding: 30px;
        .title {
            font-family: 思源黑体;
            font-size: 20px;
            font-weight: 500;
            line-height: normal;
            letter-spacing: 0em;
            color: #3D3D3D;
            .titleDivider {
                margin-top: 12px;
                margin-bottom: 1px;
                width: 100%;
                height: 4.12px;
                opacity: 1;
                /* 蓝紫渐变 */
                /*background: linear-gradient(95deg, #3A78FF 0%, #813BFF 95%);*/
                background: #22e2ff;
                .titleItem {
                    display: flex;
                }
            }
        }
        #div1, #div2, #div3, #div4, #div5, #div6 {
            display: inline-block;
        }
        .upload {
            margin: 60px auto 0 auto;
            width: 300px;
            height: 300px;
            border: 2px solid red;
            background-image: url('../../assets/pdf2word.png'); /* 图片背景 */
            background-size: contain;
        }
        .text-pdf {
            margin: 60px auto 0 auto;
            font-size: 70px;
            text-align: center;
            display: block;
        }
        .text-pdf-file {
            display: block;
            margin: 60px auto 0 auto;
            font-size: 40px;
            text-align: center;
        }
        .button-add {
            width: 300px;
            height: 70px;
            border-radius: 10px;
        }
        .divider {
            border-top: 1px solid #ccc; /* 分割线的颜色和宽度 */
            margin: 5px 5px 5px 5px; /* 分割线的上下外边距 */
        }
        .button-line {
            display: flex;
            margin-top: 30px;
        }
        .button-input {
            display: flex;
            margin-top: 30px;
            text-align: center;
        }
        .flex-item {
            flex: 1 1 auto;
            width: 15px;
            margin-right: 10px;
        }
        .circle {
            flex: 1 1 auto;
            width: 15px;
            margin-right: 10px;
            border-radius: 10px;
            background: #7de3c8;
        }
        .label {
            line-height: 20px;
            display: inline-block;
            margin-left: 5px;
            margin-right: 15px;
            color: #777;
        }
        .radio_type {
            width: 20px;
            height: 20px;
            appearance: none;
            position: relative;
        }
        .radio_type:before {
            content: '';
            width: 20px;
            height: 20px;
            border: 1px solid #7d7d7d;
            display: inline-block;
            border-radius: 50%;
            vertical-align: middle;
        }
        .radio_type:checked:before {
            content: '';
            width: 20px;
            height: 20px;
            border: 1px solid #c59c5a;
            background: #c59c5a;
            display: inline-block;
            border-radius: 50%;
            vertical-align: middle;
        }
        .radio_type:checked:after {
            content: '';
            width: 10px;
            height: 5px;
            border: 2px solid white;
            border-top: transparent;
            border-right: transparent;
            text-align: center;
            display: block;
            position: absolute;
            top: 6px;
            left: 5px;
            vertical-align: middle;
            transform: rotate(-45deg);
        }
        .radio_type:checked + label {
            color: #c59c5a;
        }
        .container {
            display: flex;
        }
        .left {
            width: 70%;
        }
        .right {
            width: 100%;
            margin-right: 35px;
        }
        .button-pro {
            font-size: 40px;
            width: 200px;
            height: 70px;
            margin-left: 120px;
            border-radius: 10px;
            background: repeating-linear-gradient(to right, #3c75ff, #7f3cff);
        }
    }
    .body {
        z-index: 1;
        position: relative;
    }
</style>
guoruijun_2012_4
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VUE3语法--img图片不显示/img的src动态赋值图片显示
雾林小妖的博客
11-27 1万+
在VUE中，img中的src动态赋值的之后，无法显示图片出现404.以及VUE中通过require访问静态资源出现的Uncaught Error: cannot module ‘asstes/logo.png’问题。
vue image的src属性动态绑定以及渲染
weixin_67647268的博客
09-21 794
name: "正常运行",name: "正常停机",name: "故障停机",name: "通讯故障",name: "检修模式",name: "急停",name: "警告",name: "过载",
Vue中定义src在img标签使用时加载不出来
最新发布
weixin_55800388的博客
06-20 468
-vue3的语法，vue2类似--> < template > < img :src = " " /> < script setup > import {const src = ref('图片路径')；--vue3的语法，vue2类似--> < template > < img :src = " " /> < script setup > import {const src = ref('图片路径')；
vue中img的src属性绑定问题,显示图片错误
qq_53461589的博客
05-23 1074
上一位前端小哥哥，没做这个交互，我接手后加上去，很简答的交互，我替换图片的时候准备三元判断，src需要属性绑定，于是发现同样的地址，我放上去图片就是加载不出来，图片加载不出来，那肯定是地址问题了（插一句：上一位大佬文件结构可能不规范），一般都是static存放静态文件，但是他自己创建了一个stalic（哭笑.gif）但是浏览器并没有渲染出来我的图片，而他的图片可以正常渲染，同样的路径，为什么我的不显示？而且浏览器还没有报错。或者Common写法。
vue img中的src使用变量引用
chestnut栗子的博客
10-27 8506
vue img中的src使用变量引用 正常 img 的使用如下 <img src="../../assets/material-detail/title-red.png" height="98" width="98"/> 如果想用变量替代src中的路径，首先在export的data中定义好路径，此处一定要加require data() { return { cardImgList: require('../../assets/material-
解决vuecli3中img src 的引入问题
10-15
在Vue CLI 3中，处理`img src`的引入问题主要涉及到项目中静态资源的管理。Vue CLI 3改变了之前的目录结构，导致一些在Vue CLI 2中可行的引用方式可能不再适用。以下是对这个问题的详细解答： 1. **在模板中直接...
Vue中img的src是动态渲染时不显示的解决
01-19
今天在项目中遇到一个需求，设计稿如下 就是展示用户头像，数据从后端获取...以上这篇Vue中img的src是动态渲染时不显示的解决就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
vue动态设置img的src路径实例
10-18
今天小编就为大家分享一篇vue动态设置img的src路径实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中img src 动态加载本地json的图片路径写法
10-17
本文将深入探讨如何在Vue中使用`img`标签的`src`属性动态加载本地JSON文件中存储的图片路径。 首先，重要的一点是，无论是本地JSON文件还是其中的图片URL，它们都应该放在`static`文件夹内。这是因为Vue CLI或...
Vue中显示img图片，显示不出来怎么办？有几种方案
xiaoma19941027的博客
05-06 8483
本文链接：https://blog.csdn.net/qq_41387882/article/details/82690337 1、近期在学习Vue中发现了一个难点就是显示图片<img&...
Vue中动态设置img的src不生效的原因
weixin_65356798的博客
08-03 850
动态设置img的src不生效的问题
vue 2 的图片src引入失败的解决办法 Vue:These relative modules were not found
weixin_44378370的博客
03-02 1401
正常在<img>标签加载图片的方式是 <img class="teamdiadema fl_img" src="../../assets/images/end/Diadema.png"> 报错信息为Cannot find module “.” 修改为 <img class="teamd...
vue 学习之 image src 的动态绑定
繁夜
08-20 3262
对于资源类参数的绑定，一定要require 进来，不能直接路径导入 问题：img的src属性填写的图片地址，可以正常渲染，但是一旦利用绑定:src属性的时候，图片就加载失败了 需求：鼠标移入切换图片 上一位前端小哥哥，没做这个交互，我接手后加上去，很简答的交互，
vue的image标签中src引用变量出现的问题
qq_54537215的博客
06-04 1618
vue的图片路径变量引入问题
Vue2.0+Vant图片预览（ImagePreview）无法显示照片
Smart_11的博客
03-26 2162
Vue2.0+Vant图片预览（ImagePreview）无法显示照片的解决办法
VUE2 v-for 图片不显示解决方法
FUTURE的博客
11-22 618
VUE CLI4.x v-for 图片不显示解决方法 <div> <ul> <li v-for="item in items"> <img :src="item.src"> {{item.id}} </li> </ul> </div> <script> export default{ data(){ return{ items:[{ src:'../im
自己解决在Vue中动态渲染图片不显示的问题
张浔CSDN
05-12 9998
乐于助人前言分析思路1. 绝对路径2. 相对路径总结 本篇文章记录的是自己在 Vue-Cli2 中如何去解决的这个问题，心里路程比较多，所以话比较多哈哈，感谢阅读，大概耗时2分钟 前言 如上图所示，我的图片就是储存在了 assets/images/ 目录下 ，但是结果不显示，这个问题其实早就遇到了，当时查阅资料之后就解决了，大概原理也不是很深，解决的方式也并不复杂，所以就没有记录，但是今天写了一个小案例时，这个问题冒出来给我整郁闷了，我怀疑是不是自己记错了解决的方式了，我去查资料，并没有什么问题，最
vue2 图片用相对路径不显示＜img src=“images/dp01.png“ alt=““/＞
LlanyW的专栏
12-29 916
第二种解决方案是：如果，src里用的是动态数据的话，可以使用require。第一种解决方案是：简单粗暴型 使用绝对路径也就是带上域名即可。是绝对路径不配置的话，显示会有问题，改成相对路径。改了之后正常显示了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值