html img src 相对路径，图片加载不出来。

Posted 2023-04-26

参考技术A 显示不出来就是路径不对，或没图片，或者图片权限不对。
建议你用phpstorm的代码提示，就是src输入完成后，会出一个browse的选项，点击直接浏览选你要显示的图片，这样路径phpstorm会自动帮你转成相对路径。
如果还是显示不出来，就去finder下面看图片的权限。追问

我用的是Pycharm。。。在哪里设置 代码提示？？？

追答

和我的phpstorm好像，这个默认是开的，Pycharm我没用过，不太清楚。

你的路径有问题，去掉最前面的"/"，用chrome看图片加载是报404还是403，要是403就是权限有问题，去finder下面改权限。

追问

去掉了最前面的“／”，还是显示不出来。是报404

vue中img的src绑定

参考技术A 在平常的处理中，img的src通常采用相对路径的方式来指定，然而在Vue中通过‘：src’动态绑定时不能如此，图片会加载失败。
也就是说，静态结构时，图片地址这样设置就可以正常显示：

而动态结构时，这样就不行

注意如果写成了

那就更加的错误了

这是因为网页会把根域作为相对路径的根目录，然而我们文件的路径是相对于项目文件的根目录的，当然就找不到了。而通过vue-cli建的文件结构中，有一个叫做static的文件夹，是存放静态文件的，这个文件夹下的文件会按照原本的结构放在网站根目录下。这时再使用‘/static.......’这样的路径就可以访问这些静态文件了。

第二种办法是使用require()包裹相对路径
html部分：

js部分：