Vue项目中src路径不成功

最新推荐文章于 2022-08-21 17:42:08 发布
最新推荐文章于 2022-08-21 17:42:08 发布
阅读量504 收藏
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45847120/article/details/106840522
版权

在做Vue项目的时候，由于项目需求，需要动态绑定img的src时，突然发现如果说是直接请求后台接口的图片地址就能显示，但是直接动态绑定img的src的图片的相对路径或者是绝对路径的时候，图片不能显示，控制台也不报错
html代码：

            <img :src="MyimgSrc" alt="">

js代码：

  this.MyimgSrc = '../../assets/jd/market/img/temp/icon_yj.png'

但是浏览器不报错，而且f12查看元素的时候在这里插入图片描述
说明已经渲染到了html的img的src上了，但是不显示在页面上

最低0.47元/天 解锁文章
�Distance.?
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue :src 文件路径错误问题的解决方法
08-27
主要介绍了vue :src 文件路径错误问题的简单解决方法，本文分步骤给大家介绍的非常详细，感兴趣的朋友跟随脚本之家小编一起学习吧
vue动态设置img的src路径实例
10-18
今天小编就为大家分享一篇vue动态设置img的src路径实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue项目添加图片src报错
qq_44367924的博客
07-31 3465
今天在万能的Ctrl+c和Ctrl+v时报错： 原代码是从data里取的图片地址，这里想直接从资源里取，结果改了地址后报错 报错的源头就是src前面那个冒号，这是vue的v-bind的缩写，它是一个 vue 指令，用于绑定 html 属性。因为原代码从data中取值，所以不会报错： 那么新代码里把":"去掉就可以了，因为这里不需要绑定： 虽然是很不值一提的问题，但是还是记录一下。 ...
Vue项目中动态绑定src路径不成功(已解决)
line
10-08 2万+
问题： 在做Vue项目的时候，由于项目需求，需要动态绑定img的src时，突然发现如果说是直接请求后台接口的图片地址就能显示，但是直接动态绑定img的src的图片的相对路径或者是绝对路径的时候，图片不能显示，控制台也不报错 html代码： &amp;lt;img :src=&quot;MyimgSrc&quot; alt=&quot;&quot;&amp;gt; js代码： this.MyimgSrc = ...
vue项目中src引入相对路径的图片不显示问题
weixin_44385915的博客
02-22 3406
如下所示： <template> <img :src="img" alt=""> </template> export default { data () { img: './logo.png' } } 这样动态引入图片，在页面会显示不出, 在这里有两种方法可以解决，造成这种现象的原因，我最后会说明 解决方法 第一种：直接 import 导入图片 <template> <img :src="img" alt=""> <
vue资源引入路径问题
qq_42451776的博客
07-28 818
动态加载图片，视频等资源时 assets下的资源 总结:在template中可以绝对路径，也可以相对路径，包括动态加载也是两样都支持 在style中不能使用绝对路径 以下为测试代码 <template> <div class="home"> <h1> 关于 assets下的图片引用问题 </h1> <!-- 相对路径 --> <img src="../assets/img/2.png"
vue中img src 动态加载本地json的图片路径写法
10-17
本文将深入探讨如何在Vue中使用`img`标签的`src`属性动态加载本地JSON文件中存储的图片路径。 首先，重要的一点是，无论是本地JSON文件还是其中的图片URL，它们都应该放在`static`文件夹内。这是因为Vue CLI或...
Vue 自定义标签的src属性不能使用相对路径的解决
10-16
主要介绍了Vue 自定义标签的src属性不能使用相对路径的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue中图片Src使用变量的方法
10-16
在Vue项目中，动态设置图片`src`通常涉及到路径问题，特别是当项目进行打包时。使用网络资源、`import`或`require`都是有效的解决方案。选择哪种方法取决于图片资源的存储位置和项目配置。理解这些方法的原理和适用...
vue静态资源的引用(相对路径,绝对路径,@,~的一些笔记,以图片引入为例,含在线演示)
动感超人的博客
08-21 1万+
vue引入静态资源有相对路径和绝对路径的方式相对路径是URL开头有.绝对路径是URL开头为/或者省略不写相对路径相对的是当前文件绝对路径相对的是public目录并且引入的时候URL开头为~的使用在css里面引入静态资源的时候如果 URL 以 @ 开头会作为一个模块请求被解析。Vue CLI 默认会设置一个指向 src 的别名 @。
Vue图片路径问题（动态引入：绝对路径、相对路径），require动态路径问题
热门推荐
weixin_45768768的博客
12-28 5万+
Vue 图片动态加载问题，require 导入使用变量问题，Vue打包前后文件夹目录比较
vue项目上线路径跳转无效(404问题)
Alice_sy314的博客
04-19 5470
在近期做的一个小项目中，本地路由跳转没有任何问题，使用nginx部署上线后出现很多路由无法跳转的问题。经过一番研究，发现可以通过以下两种方式解决。 法一.将路由改为hash模式 vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会向后端发出请求。 为什么hash模式下没有问题 router hash 模式我们都知道是用符号#表示的，如 website.com/#/login, hash 的值为 #/login 它的特点在于：
Vue初始化项目时遇到的目录路径错误问题
小青柑的博客
09-07 9591
Vue命令行运行npm install、npm run dev遇到的问题 E:\程序开发\uni-app\RuoYi-Vue>npm run dev npm ERR! code ENOENT npm ERR! syscall open npm ERR! path E:\程序开发\uni-app\RuoYi-Vue\package.json npm ERR! errno -4058 E:\程序开发\uni-app\RuoYi-Vue-New9.7>npm install WARN enoent ENOENT
Vue 绑定图片Src路径的几种方式
林中明月间丶
09-24 1万+
//直接写路径 <img src="@/assets/logo.png" alt=""> //绑定： <img src="@/assets/logo.png" alt=""> background: url('~@/assets/images/quanbg.png') no-repeat center; <li v-for ="item in images" :key="i"> <img :src="item" alt=""> &l..
VUE 图片:src方式引用加载不出来
xuebimi的博客
08-02 2万+
vscode中vue项目自动补全路径插件
最新发布
05-30
推荐使用VSCode官方提供的插件`Vetur`，它是一个专门为Vue.js开发提供的插件，可以提供自动补全、语法高亮、错误提示等功能，同时也支持路径的自动补全。 使用步骤： 1. 在VSCode的插件市场搜索`Vetur`，并安装。 2. 确认你的Vue项目中已经安装了`@vue/cli-plugin-router`或`@vue/cli-plugin-i18n`插件。这些插件会生成`router/index.js`或`src/i18n/index.js`文件，提供路由或国际化的配置信息。 3. 在Vue项目中打开一个`.vue`文件，试着输入一个路径，比如`import HelloWorld from './components/HelloWorld'`。 4. 输入路径时，如果路径不存在，Vetur会自动提示可用的路径，方便你快速补全路径。 除了Vetur，还有一些其他的Vue开发插件也支持路径的自动补全，例如`Vue 2 Snippets`、`Vue VSCode Snippets`等。你可以根据自己的需要选择适合的插件使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值