首页 > 其他分享 >vue:<img>动态绑定的路径无法解析问题

vue:<img>动态绑定的路径无法解析问题

时间:2023-06-30 17:57:03浏览次数:32  
标签:vue img 绑定 路径 解析 图片

问题

我们引用图片,正常的静态img 图片是这么引用的

<img src="@/assets/img/icoms/people.png"/>

没问题,只要路径正确
在 vue中动态绑定路径 :src

<img :src="@/assets/img/icoms/people.png"/>

发现图片根本加载不出来,因为 :src根本不能解析@/assets/img/icoms/people.png

解决方案

方案一

将图片放入public文件夹中

方案二

通过import导入,在data定义一个接收img的变量 ,在其他地方即可引用


当然 rquire 也可以

```

标签:vue,img,绑定,路径,解析,图片
From: https://www.cnblogs.com/marshban/p/17517481.html

相关文章

  • vane 一个适用于前端打工人的全栈框架,nodejs+vue3+typescript
    vane写这个的初衷是因为每次用node写接口的时候总是需要一些写大一堆的东西,也有些人把很多接口都放在一个js文件内,看起来很是杂乱,后来用到nuxt写的时候,感觉用文件名来命名接口路径很是方便,无论是query参数还是params参数,都可以通过文件名来命名,也可以通过文件夹层级......
  • Vue3 在主页中加入其它模板页template
    模板页在components目录下新建HeaderComponent.vue文件 HeaderComponent.vue <template><div>元素</div></template><script>exportdefault{//组件名称name:'HeaderComponent'}</scri......
  • Vue3 reactive 操作数组 响应性(数组变了,但页面显示没变)问题
    问题代码:tableTemplates:Array<HkTaskTemplateEntity>=reactive([]);//删除方法的一部分,根据templateId删除数组数据this.tableTemplates=this.tableTemplates.filter(item=>templateId!==item.templateId);删除后tableTemplates数组中对象减少,但vue页面显示数据......
  • vue3+tsx开发语法详解
    参考链接vue3+tsx开发语法详解vue3官方文档和jsx的使用......
  • 若依微服务docker-compose部署vuepress
    若依微服务docker-compose部署vuepress......
  • Vue3 使用 axios 实现跨域
    Vue3使用 axios可以实现请求跨域问题1.安装axiosnpminstallaxios-S2.引入axios并配置为全局 $axios 对象main.jsimport{createApp}from'vue'importAppfrom'./App.vue'importaxiosfrom'axios'//createApp(App).mount('#app')c......
  • Hadoop常见问题解析
    Hadoop常见问题解析Hadoop特性1.高可靠性:采用冗余数据存贮方式,即使一个副本发生故障,其他副本也可以保证对外工作的正常进行。2.高效性:作为并行分布式计算平台,hadoop采用分布式存贮和分布式处理两大核心技术,能够高效的处理PB级别的数据3.高可扩展性:hadoop的设计目标是可以高效......
  • Module not found: Error: Can't resolve ' vue-resource'
    问题:在学习vue的过程中出现了这个问题,说明VueResource模块没有安装。解决方法:打开终端,进入当前项目所在目录,输入指令npminstallvue-resource--save然后等待安装,安装好了以后在main.js中引用(下图红色框中代码) ......
  • Vue3 vite:is a JavaScript file. Did you mean to enable the 'allowJs' option?
    描述今天在vue3+vite下进行打包时,突然vscode报了一个error。 大概的意识是询问是否启用“allowJS”选项,因为该文件在程序内是指定用于编译的根文件。提示信息已经很明确了,下面从网上摘抄了下什么是allowJS选项。allowJs是1.8中新提供的选项。TypeScrip......
  • 第1节:vue3开发前准备
    (1)需要安装nodeJs版本16.0或以上版本     以下是2023年6月30日官方文档截图 (2)查看你的电脑里node版本 通过cmd命令查看node-v查看是否大于等于16 (3)创建vue项目注意:vue项目的命名不能用大写字母,只能小写字母,创建的项目名会以文件夹的方式呈现创建命令:cmd进......