Vue.js中img标签的相对路径

最新推荐文章于 2024-07-26 11:48:19 发布
最新推荐文章于 2024-07-26 11:48:19 发布
阅读量3.2k 收藏
点赞数 2
分类专栏： Vue前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39674002/article/details/100618014
版权

前言

最近一直在研究前端框架,在前端选择技术的过程程中也有些小分歧有些人说用React,有人说用Vue.js,最后经过激烈的争论后决定是用Vue.js为基础的前端框架.所以就有了学习的过程,不断积累小的问题,记录下成长的脚步.

正文

主要问题是,图片加载不出来

在这里插入图片描述
用到代码的位置
在这里插入图片描述

结束

貌似这篇有点断,不过这也是个小的知识点.估计这种小的问题以后还会有很多.相信一句话,“不积硅步无以至千里”.继续加油

朗福德_豪
关注
专栏目录
Vue里的相对路径
T_ooooo的博客
08-31 909
../ 表示父级目录下 ./ 表示当前目录下 @/ 是webpack/build/webpack.base.conf.js中配置的路径别名 ~ @/中的 ~ 代表根目录，~@即根目录下的配置为@的路径
关于vue中图片相关src相对路径不同情况
关于我遇到的或大或小的问题
03-26 907
这个src其实分不同情况有不同写法。vue其他标签，如avatar头像就需要使用require动态解析路径并添加@/或者../../
vue中路由的相对路径和绝对路径以及路由重定向问题
最新发布
m0_73784301的博客
07-26 720
vueRouter中的绝对路径和相对路径
vue 打包配置相对路径
qq_44663401的博客
06-01 2799
vue 打包配置相对路径。
vue相对路径修改
庆安的博客
04-24 1530
如果静态文件不是部署在网站根目录下，vue-cli将给你造成巨大的麻烦。 你不能直接把build好的文件抛进一个目录。 你不能直接在本地打开用vue做好的静态网站。
vue.config.js中配置Vue的路径别名的方法
10-15
这样，在我们的Vue组件或其他JS文件中，就可以使用`import img from '@/assets/images/logo.png'`这样的语句，而不是冗长的相对路径。 路径别名的应用不仅限于静态资源，还可以为经常引用的Vue组件、工具函数等目录...
Vue.js中的图片引用路径的方式
10-19
在Vue.js开发中，正确地引用图片资源是项目开发的常见需求，为了保证图片能够被正确加载，我们需要了解不同场景下如何设置正确的图片路径。以下是根据提供的文件内容总结的Vue.js中图片引用路径的几种方法以及相关...
详解Vue.js中引入图片路径的几种方式
10-16
以下是几种常见的Vue.js中引入图片路径的方法： 1. 相对路径引用：这是最直接和简单的方法。通过使用以点（.）开始的相对路径，如 "./" 或 "../"，在JavaScript中导入资源或者在template/CSS中引用资源。这种引用...
解决vue单页面应用打包后相对路径、绝对路径相关问题
11-20
在`vue.config.js`（如果你使用的是Vue CLI 3或更高版本）或`webpack配置文件`（对于Vue CLI 2）中，将`assetsPublicPath`设置为相对路径，例如`./`。这会使HTML、CSS等文件引用资源时使用相对路径。修改后，HTML...
Vue.js 动态为img的src赋值方法
10-18
在Vue.js中，一种简单的做法是使用模板中的三元运算符来直接在img标签的src属性上做判断。代码如下： ```html <img v-attr="src: sex == 'male' ? 'images/male.png' : 'images/female.png'"> ``` 这种方法虽然...
大事件项目40---Vue代码里如何引入相对路径图片
weixin_54048131的博客
12-14 381
1、Vue代码里如何引入相对路径图片，你写成上面的就能够显示了，下面写个:,能成功吗？ 2、我们先把变量声明一下 3、图片的路径无，我直接跟他复制了4、所以我在变量里装 5、把变量赋予给ing，src 6、这里写行不行，你发现还是404 7、我们发现属性，最后原封不动的给了img，webPack会对图片的路径做处理 8、引入图片要用静态资源路径，因为他在打包时候，会做一下流程化控制，经过这样的处理，他竟然变成服务器，跟路精的图片 9、分析样式代码，发现样式代码u
Vue进阶（七十五）：相对路径和绝对路径
IT全栈 华强工作室
09-16 8681
绝对路径：是从盘符开始的路径，形如 C:\windows\system32\cmd.exe 所谓的绝对路径就是完整的路径。 相对路径：是从当前路径开始的路径，假如当前路径为C:\windows 要描述上述路径，只需输入 system32\cmd.exe 实际上，严格的相对路径写法应为 .\system32\cmd.exe 其中，.表示当前路径，在通道情况下可以省略，只有在特殊的情况下不能省略。 假...
Vue图片路径问题（动/静态引入：绝对路径、相对路径）
weixin_51747462的博客
11-25 2889
Vue图片路径问题（动/静态引入：绝对路径、相对路径）require使用问题
vue文件路径相对地址简写为@ 省略../ webpack configureWebpack 用法
Taurus_666
09-13 609
在项目中通常我们看到文件地址简写为@/view @/store ，如果你的地址还是一长串的…/…/…/…/相对地址的话，那么下面的代码希望能够帮助到你。 第一步 找到你的vue webpack配置文件入口，可能是你自定义的config.js ，也可能是vue.config.js，找到下面这些熟悉的配置； module.exports = { SERVER: [ {API_SERVER: "https://*******.net"}, //测试, ], //本地webpack开发服务器端
vue静态资源的引用(相对路径,绝对路径,@,~的一些笔记,以图片引入为例,含在线演示)
热门推荐
动感超人的博客
08-21 1万+
vue引入静态资源有相对路径和绝对路径的方式相对路径是URL开头有.绝对路径是URL开头为/或者省略不写相对路径相对的是当前文件绝对路径相对的是public目录并且引入的时候URL开头为~的使用在css里面引入静态资源的时候如果 URL 以 @ 开头会作为一个模块请求被解析。Vue CLI 默认会设置一个指向 src 的别名 @。
vue 图片改成相对路径
weixin_45845576的博客
06-28 1770
代码如下（示例）： 2.在build/utils.js 添加 如下 代码如下（示例）： …/…/assets/imgages/img.png
vue-cli创建的项目部署在相对路径，你需要做这些。
weixin_34347651的博客
07-26 721
如果静态文件不是部署在网站根目录下，vue-cli将给你造成巨大的麻烦。 你不能直接把build好的文件抛进一个目录。你不能直接在本地打开用vue做好的静态网站。 改成相对路径，主要需要做两步。 1、修改config => index.js => build => assetsPublicPath 中的'/'成为'./'...
vue 绑定图片相对路径
马优晨
03-26 3731
如上图所示，我们制作，tab切换功能，但是因为字体的原因，我们这里选择tab切换时，使用图片进行替换。但是 使用过程中发现一个问题，vue绑定图片“相对地址” 图片并不能展示出来。 完整代码部分： <template> <div class="zuop-award"> <div class="work-title"> <img src="....
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值