vue3 动态(:src)绑定img图片

这篇具有很好参考价值的文章主要介绍了vue3 动态(:src)绑定img图片。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

webpack 创建的vue2可以通过 require对图片进行动态绑定

<script>
export default{
  data(){
    return{
      list:[
        {
          id:1,
          img:require("./assets/logo.png")
        },
        {
          id:2,
          img:require("./assets/logo.png")
        },
        {
          id:3,
          img:require("./assets/logo.png")
        }
      ]
    }
  }
}

但vite创建的vue3则不可以通过require对图片进行动态绑定

可以通过一下方法进行绑定(注意vite根目录是/,且vite会自动解析src中的字符串)文章来源地址https://www.toymoban.com/news/detail-535688.html

<script setup>
import { reactive } from "@vue/reactivity"

const getImg = (name)=>{
  return `/src/assets/${name}.png`
}
const zyc = reactive({
  list:[
    {id:1,
    img:getImg("logo")},
    {id:2,
    img:getImg("logo")},
    {id:3,
    img:getImg("logo")}
  ]
})
</script>

到了这里,关于vue3 动态(:src)绑定img图片的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • vue中img的src动态赋值(require方法)

    如果不想更改路径,可以用require将图片作为模块加载进去 用了require,就是将图片当成模块先引进来,再绑定。 当需要实现动态加载图片的时候就需要传一个变量给require,在方法中给这个变量赋值 参考文件:vue中img的src动态赋值(本地图片的路径) - 简书 

    2024年02月11日
    浏览(10)
  • Vue动态设置img的src不生效的问题

    Vue动态设置img的src不生效的问题

    原因分析 在VUE项目中有时会遇到需要动态修改Img的src的情况,如果直接修改会使得图片无法显示出来 这是由于src被当做静态资源处理了,并没有进行编译。 解决办法 第一种 使用require引入图片 第二种 将图片先引入文件中 第三种 将图片放入vue项目的public文件夹中,在根目录

    2024年02月11日
    浏览(8)
  • vue3+vite2动态绑定图片优雅解决方案

    vue3+vite2动态绑定图片优雅解决方案

    优雅解决方案在最下面,小伙伴们儿可以直接前往 😊 在vue3+vite2项目中,我们有时候想要动态绑定资源,比如像下面的代码这样: 实际效果是这样: 我们注意到,控制台的报错信息 GET http://127.0.0.1:5173/1.jpg 404 (Not Found) GET :表示向服务器请求资源的方式。 http://127.0.0.1:5173

    2024年02月11日
    浏览(40)
  • vue项目中,动态src引入图片,并且js根据文件名后缀,判断文件图片、视频、文档、pdf等类型的方法

    vue根据文件地址,获取后缀,根据后缀判断类型,然后根据类型动态展示不同类型的照片 1、处理后缀,根据后缀判断类型   2、根据返回的结果,直接将文件名命名为返回的结果,比如我有个图片类型的文件,经过上述的方法,返回的是image,那我直接要显示的图片名称就为

    2024年02月06日
    浏览(32)
  • 解决react,<img>src使用require方法引入图片不显示问题

    解决方法: 再导入的图片后加.default即可 img src={require(\\\'../../images/bg.png\\\').default} alt=\\\"\\\" /   推荐阅读:https://www.cnblogs.com/qianxiaoniantianxin/p/14789826.html

    2024年02月15日
    浏览(8)
  • [Vue3] Wangeditor富文本实现将粘贴中包含的图片自动上传后台,并替换src

    前言 吐槽: 还以为他们富文本把文字写好, 在一个个上传图片, 组成一片文章. 那就没有办法了, 只能修改下代码增加下自动上传图片功能. 后来写到一半才发现html 有个属性好像可以让跨域的图片 显示出来. meta name=\\\"referrer\\\" content=\\\"no-referrer\\\" / 以为这样就可以不用写了, 但是老大

    2024年02月04日
    浏览(11)
  • 【vue3】数据绑定,动态渲染class与style

    数据绑定的一个常见需求场景是操纵元素的 CSS class 列表和内联样式(style)。因为 class 和 style 都是 attribute,我们可以和其他 attribute 一样使用 v-bind 将它们和动态的字符串绑定。但是,在处理比较 复杂的绑定 时,通过拼接生成字符串是麻烦且易出错的。因此,Vue 专门为

    2024年02月13日
    浏览(10)
  • Vue3中动态绑定:disabled element-plus使用方法

    @change=\\\"whetherFlag($event)\\\"  根据value值判断是否禁用 :disabled=\\\"isShow\\\" 初始值为禁用状态 const isShow = refboolean(true);  根据value的值判断是否禁用  

    2024年01月25日
    浏览(11)
  • 前端js动态切换图片文字

    2024年02月09日
    浏览(9)
  • Vue2和vue3中双向数据绑定的原理,ES6的Proxy对象代理和JavaScript的Object.defineProperty,使用详细

    简介: Object.defineProperty大家都知道,是vue2中双向数据绑定的原理,它 是 JavaScript 中一个强大且常用的方法,用于定义对象属性,允许我们精确地控制属性的行为,包括读取、写入和删除等操作; 而Proxy是vue3中双向数据绑定的原理,是ES6中一种用于创建代理对象的特殊对象,

    2024年02月15日
    浏览(7)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包