html 中img标签中src属性放绝对路径不能显示？

Posted 2023-04-11

<img src="E:\workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\MySSH\upload\1419994444008.jpg">

src是通过ajax得到的保存在服务器端地址

src的值是图像文件的
url，也就是引用该图像的文件的的绝对路径或相对路径。绝对路径就是从磁盘根目录到目标文件的路径；相对路径就是从当前位置指向目标文件的路径。 参考技术A 你应该给他http的地址，而不是本地路径 参考技术B 可以是可以 首先 目录正确 然后有权限 再然后 图片要存在 还是不行的话 你在网页中图片上点右键看属性链接地址和你写的有什么区别没追问

图片百分之百存在，我拿src中路径可以直接显示图片

火狐调试显示 载入指定url失败

参考技术C 不建议这么写。如果是html的话建议还是用相对路径。如果是项目的话获取工程根目录，然后在找到图片。本回答被提问者采纳 参考技术D 你得保证你本机E盘上有这个图，

Vue项目中img标签src的路径问题

参考技术A

一、问题引入

像这种直接写死的没有出现什么问题。
但肯定是要改为父组件传值url过来属性绑定来设置的（毕竟是个组件，写死这组件的复用性就太差了）。此时看了一下运行项目后此图片的路径。

webpack编译后的图片文件夹 img 会直接在根目录，图片的上层目录 sys-head 也被忽略了，图片为了避免重复会默认重名了一个名字（vue-cli3搭建的工程）。

图片url也是相对路径写法：

子组件接收后设置图片url：

感觉没什么问题的运行后，图片没有显示：

二、解决方法
1、通过import的方法将图片源路径引入
这也是我这次重构遇到这个问题用的方法。
通过import的方法将图片源路径引入，这里使用相对路径。（打包编译会形参最终路径）

路径直接为引入的此图片（经测试，也可以是数组）。

然后子组件可直接根据此值设置图片 src 。

运行正常：

2、直接将你的图片源文件放在项目目录的 static 文件夹里
原项目用了这种解决方法。（看到了这张图片被放在了 static 文件夹中）
项目中创建 static 文件夹，把图片放入，即可以根据此路径引入。

原来vue-cli2搭建的项目可以使用这种，现在vue-cli3发现他也会把static做打包转化，这种方法使用不了。

3、使用require引入图片

也可以。但是要注意：require后面只能是字符串而不能是变量，所有动态路径无法实现。