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

最新推荐文章于 2024-04-14 15:52:05 发布
原创 最新推荐文章于 2024-04-14 15:52:05 发布 · 2.8k 阅读 · 2 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#vue
本文探讨了在使用变量加载图片时遇到的问题及解决方法。通过对比直接使用字符串与使用变量加载图片的不同路径，揭示了问题所在，并给出了正确的加载方式。

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

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

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

<img :src="src">

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

使用变量的加载路径

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

使用字符串的加载路径

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

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

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

VUE3语法--img图片不显示/img的src动态赋值图片显示
雾林小妖的博客
11-27 2万+
在VUE中，img中的src动态赋值的之后，无法显示图片出现404.以及VUE中通过require访问静态资源出现的Uncaught Error: cannot module ‘asstes/logo.png’问题。
vue-cli3 :src动态绑定图片地址报错404
yy168888的博客
06-17 4205
我的写法如下： <img :scr="imgUrl"> ... data(){ return { imgUrl: '@/assets/images/office1.jpg' //报错 404 } } 原因： 在webpack中会将assets下的图片当做模块来用，因为是动态加载的，所以url-loader将无法解析图片地址，然后npm run dev 或者npm run build之后导致路径没有被加工【被webpack解析到的路径都会被解析为static/img/[filena
vue 加载图片使用@路径加载不出来
坐等夕阳落time的博客
10-14 3678
vue 加载图片使用@路径加载不出来
vue3想用@/来代表src路径
weixin_53488675的博客
03-13 2619
找到项目中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..
7.21 vue中img的使用坑
web
07-21 536
vue基础img引入组件使用定时器小细节 img引入 <img src="./img/1.png"> 直接通过src里面放地址就行 import img from '@/img/1.png' <img :src="img"> 可以通过import的方式引入，img相当于一个变量，但是图片比较多的时候就不太适合 imgs:[require('@/img/1.png'),require('@/img/2.png')] 适合引入多个图片 注意： 直接通过 在data中定义一个变量 i
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 引用src中的文件_Vue项目中img标签src的路径问题
weixin_39668571的博客
12-22 1466
一、问题引入今天重构之前赶工的项目，父组件通过属性绑定传值给子组件，子组件的图片url在img标签的src属性中相对路径写死的。(路径初始就写在src属性中)像这种直接写死的没有出现什么问题。但肯定是要改为父组件传值url过来属性绑定来设置的(毕竟是个组件，写死这组件的复用性就太差了)。此时看了一下运行项目后此图片的路径。webpack编译后的图片文件夹 img 会直接在根目录，图片的上层目录 s...
VUE中src写Img地址，服务器识别不了
weixin_44580808的博客
07-19 635
VUE中src写Img地址，服务器识别不了 使用require导入图片 headerimg:require("./assets/img/1.jpg") 只有require才能被浏览器识别出来
vue3引入图片,路径没错但项目就是无法识别
晨曦的博客
07-06 2624
vue3引入图片,路径没错但项目就是无法识别,Vue3引入图片路径明明没有错,为什么项目就是提示报错呢?
img标签没有文字提示的问题
海将军
03-30 4797
img标签没有文字提示的问题
关于vue组件之间传递src地址不显示图片的问题
LBY_XK的博客
08-09 591
src 图片不显示
vue img动态src加载@别名图片失败问题
likuntao123的博客
01-02 2565
vue img动态src加载@别名图片失败问题 问题的由来： url-loader会把非根路径的url解析为相对路径 加载@别名的动态src 使用require引入图片（ps：require后面只能是字符串而不能是变量） ...
【Vue】（解决）el-image 图片引入根路径@无效
北海_南风
07-18 2109
用于引入模块、JSON、或本地文件。可以从node_modules引入模块。require是运行时调用，所以require理论上可以运用在代码的任何地方。图片在根路径下，如下引用图片路径发现无效，图片显示“加载失败”这样就能正常引入图片了。...
vue静态资源的引用(相对路径,绝对路径,@,~的一些笔记,以图片引入为例,含在线演示)
热门推荐
动感超人的博客
08-21 2万+
vue引入静态资源有相对路径和绝对路径的方式相对路径是URL开头有.绝对路径是URL开头为/或者省略不写相对路径相对的是当前文件绝对路径相对的是public目录并且引入的时候URL开头为~的使用在css里面引入静态资源的时候如果 URL 以 @ 开头会作为一个模块请求被解析。Vue CLI 默认会设置一个指向 src 的别名 @。
./img、../img 和@/在vue中区别 路径区别
q77777_7的博客
04-14 685
在 Vue.js 中，路径的引用方式对于正确地定位资源文件（如图片、组件、样式等）是非常重要的。在编写 Vue 项目时，建议根据项目的结构和需求选择合适的路径引用方式。可以提高代码的可读性和可维护性，特别是在大型项目中。
vue中 空格不生效问题
fhrlhh的博客
11-21 1544
3.全角空格(中文符号) \u3000，中文文章中使用。2.半角空格(英文符号) \u0020，代码中常用的。1.不间断空格 \u00A0 也可写做 \xa0。
vscode 开发 vue3项目 ， src 别名 为 @ ，报错
南湖小皮的博客
04-08 343
https://geekdaxue.co/read/me-note@vue/mydm8l 需要设置 basicURL 然后就生效了 { "compilerOptions": { // 设置解析非相对模块名称的基本目录 "baseUrl": ".", // 设置模块名到基于baseUrl的路径映射，可以设置路径别名的语法提示 "paths": { ...
vue3项目无法识别@/问题
小刘的日常bug记录
06-01 1380
vue3项目无法识别@/问题。
vue移动端项目使用vant的Image组件，src为本地图片报错404 (Not Found)
weixin_49021184的博客
06-10 736
require()为加载模块机制，在这相当于引入图片。
vue解决img动态src问题（相对路径）
qq_42031498的博客
02-26 3467
解决vue在使用img标签时require动态src(相对路径)的问题
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

孤独白鲸

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

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

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

打赏作者

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

抵扣说明：

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

余额充值