首页 > 其他分享 >vue3 中动态绑定 img src 问题

vue3 中动态绑定 img src 问题

时间:2023-01-09 17:26:05浏览次数:57  
标签:src img 打包 https vue3 vite

vite 官方默认的配置,如果资源文件在assets文件夹打包后会把图片名加上 hash值,但是直接通过 :src="imgSrc"方式引入并不会在打包的时候解析,导致开发环境可以正常引入,打包后却不能显示的问题。

vite官方文档的解释:
https://vitejs.bootcss.com/guide/assets.html

我这里使用了文档中的  new url() 的方式:

 

 

build 后的文件:

 

 

 

参考:https://blog.csdn.net/Mjxiaomihu/article/details/128552151

标签:src,img,打包,https,vue3,vite
From: https://www.cnblogs.com/guofan/p/17037617.html

相关文章

  • vue3 之生成二维码
    使用QPCode生成二维码前提:vue3+ts项目安装QPCodenpminstallqrcodejs2-fixes引入importQRCodefrom'qrcodejs2-fixes';页面部分<divclass="login-scan-contain......
  • vue3之 websocket
    前提:vue3+ts项目使用websocket一、在utils文件夹中创建websocket.ts文件/***websocket*///constwsUrl=`ws://`+window.location.host+`/emergency/webSocket......
  • vue3+vite2 vite.config.js 配置
    vite配置官方文档:https://cn.vitejs.dev/config/shared-options.html#base 开发服务器选项-serverserver:{//host:指定服务器应该监听哪个ip地址。如果设置为......
  • 解决Vue3中定时器自动销毁问题
    解决Vue3中定时器自动销毁问题1.前言在近期的一个Vue项目中使用到了定时器,由于本人没有系统学习过前端,对前端项目的水平仅限于能够使用,一些细节上可能存在问题,比如定时器......
  • Vue3 中的组件 provide和inject 传值、获取组件实例的方法getCurrentInstance()
     一、 provide和inject1:在父级组件中提供数据     语法:provide('提供给子组件的变量名',提供给子组件的数据)   2:在子级组件中获取收据  ......
  • VUE3.0+Vite 多页面应用配置
    目录VUE3.0+Vite多页面应用配置核心原理多页面应用模式(核心)Vue路由配置(示例)vite.config.js(示例)多页面跳转构建流程代码结构构建流程源码链接VUE3.0+Vite多页面应用配置......
  • vue2,vue3同时监听多个数据变化
    我是使用vue计算属性(computed)将需要监听的数据拼接在一起,再通过watch进行监听1.vue普通写法<template><divid="app"><el-inputv-model.number="valu......
  • Vue3单击新增添加新的input
     效果图: 代码:<template><div><inputtype="text"v-for="(item,i)ofitems"v-model="items[i]":key="i"@input="inp"><button@click="onAdd">......
  • Vue3 中的响应式api
    一、setup文件的认识 特点1:script中间的内容就是一个对象特点2:script在第一层定义的方法或者变量=>就是这个对象属性 =>顶层的绑定回被暴露给模板(模......
  • Vue2和Vue3实现响应式原理
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"/> <title>Document</title> </head> <body> <scripttype="text/javascript"> //源数据 letpers......