vue img路径中中无法识别 ~@

最新推荐文章于 2023-10-18 14:53:34 发布
最新推荐文章于 2023-10-18 14:53:34 发布
阅读量2.5k 收藏 2
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014685642/article/details/123729793
版权

在标签中直接使用字符串可以正常加载图片的

<img src="~@/**img.jpg">

但假如使用的是变量却变成了找不到图片

<img :src="src">

对早过变量输出的字符串是一样的，那么我就需要检查真实的加载路径是否一致

使用变量的加载路径

http://localhost:8091/@/assets/**.jpg

使用字符串的加载路径

http://localhost:8091/static/**.jpg

我有理由相信是作为变量操作缺少某个转换的环节，需要自己手动加上，于是翻阅资料，找到正确的加载方式：

require( "@/assets/img/headImg.png")

孤独白鲸
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue img动态src加载@别名图片失败问题
likuntao123的博客
01-02 2350
vue img动态src加载@别名图片失败问题 问题的由来： url-loader会把非根路径的url解析为相对路径 加载@别名的动态src 使用require引入图片（ps：require后面只能是字符串而不能是变量） ...
vue3想用@/来代表src路径
weixin_53488675的博客
03-13 2311
找到项目中node_modules这一依赖文件夹 查看此文夹下是否有path文件夹，若没有在终端下载一下就有了 npm install path --save 在vue.config.js（若没有就自己新建吧）中输入以下代码来配置 const path = require("path"); function resolve(dir) { return path.join(__dirname, dir); } module.exports = { chainWebpack: (co..
vue3+ts vscode无法识别/@/ 路径
weixin_42353499的博客
09-30 3972
在tsconfig.json中添加下面的配置即可 { "compilerOptions": { "paths": { "/@/*": ["src/*"] } } }
vue3引入图片,路径没错但项目就是无法识别
晨曦的博客
07-06 2162
vue3引入图片,路径没错但项目就是无法识别,Vue3引入图片路径明明没有错,为什么项目就是提示报错呢?
vue.js 解决空格报错！！！
吴均的博客
03-22 1万+
当我们初入vue.js的时候。使用cli脚手架快速创建项目的时候： 如果语法格式错误（这里主要指的是：空格多少引起的问题）！！ 找到  webpack.base.config.js文件注释掉下面的东西！！ 我也是初学vue，所以如果有错误，希望大家提出！！！
vue动态设置img的src路径实例
10-18
今天小编就为大家分享一篇vue动态设置img的src路径实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中img src 动态加载本地json的图片路径写法
10-17
本文将深入探讨如何在Vue中使用`img`标签的`src`属性动态加载本地JSON文件中存储的图片路径。 首先，重要的一点是，无论是本地JSON文件还是其中的图片URL，它们都应该放在`static`文件夹内。这是因为Vue CLI或...
vue-starter-kit:vue@2.x + vant@2.x移动端基础模板
05-17
Vue入门套件 项目设置 npm install 编译和热重装以进行开发 local: npm start dev: npm run dev 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
vue@2.6.14 本地资源
11-28
https://unpkg.com/browse/vue@2.6.14/ 下载本地资源，适合网络不好或者需要离线使用Vue.js的情况。
浅谈vue项目,访问路径#号的问题
10-14
Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面。在Vue项目中，你可能会遇到URL中包含"#/"的情况，这与Vue Router的默认工作模式有关。...希望这些信息能帮助你更好地理解和解决Vue项目中的路径问题。
vue，el-image 图片引入根路径@无效
北海_南风
07-18 1661
用于引入模块、JSON、或本地文件。可以从node_modules引入模块。require是运行时调用，所以require理论上可以运用在代码的任何地方。图片在根路径下，如下引用图片路径发现无效，图片显示“加载失败”这样就能正常引入图片了。...
vue3项目无法识别@/问题
小刘的日常bug记录
06-01 920
vue3项目无法识别@/问题。
Vue 模板字符串碰到script无法识别，报错Parsing error: Unterminated template.
最新发布
vanora1111的博客
10-18 758
Vue 模板字符串碰到script无法识别
vue中 空格不生效问题
fhrlhh的博客
11-21 1278
3.全角空格(中文符号) \u3000，中文文章中使用。2.半角空格(英文符号) \u0020，代码中常用的。1.不间断空格 \u00A0 也可写做 \xa0。
关于vue组件之间传递src地址不显示图片的问题
LBY_XK的博客
08-09 428
src 图片不显示
idea 打开vue 不能识别@路径
lmj3732018的博客
02-23 2608
第一步： 再根目录自定义一个文件，如webpath.config.js,内容为： 'use script' const path = require('path'); function resolve(dir) { return path.join(__dirname, dir); } module.exports = { resolve: { alias: { '@': resolve('src') } } };
vue img 图片不显示 vue中图片不显示路径显示 [Object Object]
zhaoletf的博客
07-29 2030
vue中img 直接使用 url=“@/。。。” 路径会报 url="[Object Oject]" 错误， 可以使用 import img from "@/ass“ 然后在data中 img ： img vue for 循环显示的图片，正常绝对路径可以显示出来，但是经过for循环同样的路径的话却无法显示 应该是定义成 dataArray ：{ img：require(’@/img/123/png/) } 这样就可以完美显示了 ...
vue中的img路径
热门推荐
~~
03-30 1万+
目录 一、引入public中的img 二、引入assets中的img 三、通过require()函数动态引入路径 四、css中background属性通过url()函数引入路径 五、css中background属性通过url()函数 动态 引入路径 六、通过组件动态引入路径 七、组件引入public中的路径 八、组件引入外部图片链接 推荐<el-image>组件，其详细介绍见：https://element.eleme.cn/#/zh-CN/component/image 一
vue项目中 img标签加载失败(404)方法，@error事件
sunshineTing2的博客
02-20 3530
@error="defImg" <img src="123" @error="defImg" alt="" width="150" > export default { data() { return { defaultImg: require("@/assets/img/img_fail.png"), } }, methods: { defImg(){ let img = event.srcEl
<img :src=`~@/assets/images/${item.imgUrl}` alt="" /> 请问这样做为什么不对
06-09
这段代码使用的是 Vue.js 的语法，`:src` 是 Vue.js 绑定属性的一种方式，用于将数据绑定到元素的 `src` 属性上。 在这里，`~@` 是 Webpack 的别名，用于指向项目根目录。但是在模板字符串中使用别名时，Webpack 会将这个别名视为字符串的一部分，而不是解析成真正的路径。因此，你需要在模板字符串中使用 `require` 函数，将别名转换成真正的路径，例如： ``` <img :src="require(`@/assets/images/${item.imgUrl}`)" alt="" /> ``` 在这里，`@` 也是 Webpack 的别名，指向 `src` 目录，所以这里使用 `@` 代替了 `~@`。 这样做可以让 Webpack 在打包时正确地解析路径，并将图片打包到正确的位置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

孤独白鲸

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值