vue动态获取图片时，找不到图片所在路径的问题/vue引入图片

最新推荐文章于 2024-04-09 22:07:03 发布
最新推荐文章于 2024-04-09 22:07:03 发布
阅读量3.6k 收藏 2
点赞数 1
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bradzhou/article/details/104613467
版权

有个需求

需要动态访问本地的图片，最开始书写如下

父组件

子组件

这样写虽然浏览器不报错，但是也没有解析出图片位置

 

图片引入需要require方法，而且很奇怪，require还需要拼接，我如果不拼接，仍然会报错

 

父组件

最低0.47元/天 解锁文章
codersang
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue2/3解决项目打包后本地图片等资源找不到的问题
weixin_68658847的博客
05-23 1701
vue2/3解决项目打包后本地图片等资源找不到的问题
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
08-28
然而，如果图片路径是从后台API获取的，那么你可能需要在Vue实例的生命周期钩子，如`created`或`mounted`中，通过Ajax请求获取图片路径，然后赋值给`imageUrl`。例如： ```javascript new Vue({ el: '#app', data...
vue3 动态获取图片地址
最新发布
sj18838107211的博客
04-09 460
vue3 动态获取图片地址
vue样式中背景图片路径_vue 项目打包时样式及背景图片路径找不到的解决方式...
weixin_39866974的博客
12-20 530
问题描述：vue项目打包后，文件找得到，但是引用的字体及背景图片找不到；解决方法：主要是需要单独为 css 配置 publicPath 。ExtractTextWebpackPlugin 提供了一个 options.publicPath 的 api，可以为css单独配置 publicPath 。对于用 vue-cli 生成的项目，dist 目录结构如下：dist├── index.html└── ...
vue写在data里面的图片路径找不到的解决办法
ljw_jiawei的博客
06-07 3804
data里要写编译后图片位置的地址,在html中可直接写目前地址
解决 vue-cli 打包后图片路径获取不到的问题
haogemr的博客
10-15 1901
摘抄博客：vue-cli打包后图片路径取不到的问题 1. 第一步 在config / index.js 文件中把assetsPublicPath 修改为 ./ 2. 第二步 在 build / webpack.prod.conf.js 文件中，在output里增加 publicPath: './' 3. 第三步 虽然解决了资源路径的引用问题，但是资源里面的背景图片还是不显示， background: url("../../assets/images/logo-index.png") no-repeat;
vue从数据库获取图片地址，为什么图片地址为变量时找不到图片？
weixin_43958683的博客
04-20 5161
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
01-19
但打完包出来的页面却报找不到资源的错误。 查了一下原因，css引入图片再打包后，style-loader无法设置自己的publicPath，于是我改变了ExtractTextPlugin的css路径publicPath。 if (options.extract) { retur
解决Vue打包后访问图片/图标不显示的问题
10-16
总结一下，解决Vue打包后图片和图标不显示的问题主要涉及两个步骤：一是检查并修正CSS中引用资源的路径，二是通过配置`publicPath`让Vue CLI在打包时自动处理资源路径。完成这两个步骤后，你应该能够成功地在生产...
vue cli使用绝对路径引用图片问题的解决
08-28
在 Vue CLI 项目中，使用绝对路径引用图片可能会遇到一些问题，例如在 js 文件中使用 require() 函数引入图片资源，但是在样式文件中使用绝对路径可能会出现问题，例如 background: url("/static/images/banner.jpg...
Vue图片与文字混输的实现方法
10-15
对于图片的插入，可以监听图片元素的点击事件，获取图片的URL并转换为Vue可识别的格式（如使用`require`）。当用户点击表情图片时，我们可以创建一个新的`img`标签，并设置其`src`和`alt`属性。以下是一个简单的实现...
（转载自用）vue动态渲染本地路径图片不显示的解决方案，v-fro 渲染本地图片路径不显示（记录一下项目中的坑）。
weixin_46446301的博客
09-26 1997
转载用到的坑Vue图片渲染问题
Vue页面查询，图片不能显示出来，图片配置问题，导致前端访问不到图片
SUMMERENT的博客
10-08 5479
Vue 前端页面，查询数据时，图片没有出来，数据库中有图片，也不报错，为什么呢？ 如下图所示： 原因之一： 后端没有做图片重定向到前端Configuration配置，导致图片不显示 配置代码如下： @Configuration public class SingerPicConfig implements WebMvcConfigurer { @Override public void addResourceHandlers(ResourceHa...
【Vue】关于开发中本地图片加载失败的经验总结
NineWaited的博客
06-07 8616
关于vue网页的开发过程遇到本地图片加载失败的解决方法
Vue中显示img图片，显示不出来怎么办？vue显示图片
热门推荐
黄钟飞的博客
09-13 10万+
1、近期在学习Vue中发现了一个难点就是显示图片<img> 试了很多办法都不行，有的还保错。后来我找了很多人，以及网上找资料终于被我给找到了。 2、如何你是一个普通组件的话，那么这样就可以了 <img src="../assets/images/fk.jpg" width="100%"> 上面这种是写死的，下面让我们试试进行动态显示； 或者这样写也可以：...
vue src动态加载请求获取的图片
kylvia的专栏
05-18 6万+
一. 加载本地图片 1.图片目录 2. 在data中配置图片路径 data() { return { formData: { avatar: require('@/assets/icon1524737568182.png'), motto: 'xxxxxxxxxx' }, ...
vue中获取不到img的解决方法
西瓜甜甜的博客
05-18 938
vue中关于图片加载动态获取DOM宽高问题 最近项目中遇到一个图片加载问题，从服务器获取到图片，能够打印出dom，dom中height和width属性均有值，但是取值时height为0，之后查阅资料发现，原来只是获取到了图片，但是图片并没有加载出来，img这个dom存在，但是图片并没有加载出来，要动态获取就需要等图片加载完成 在标签上加个监听事件@load html <img @load="loadImg($event.target)"/> js loadImg(e){ if(e.hei
vue3中，通过el-upload在前端将图片上传到Django的后端服务器（使用ImageField）
05-27
6. 完成上传后，Django后端服务器返回保存的图片路径，Vue3前端根据路径显示图片或保存路径到数据库中。例如： ```vue 图片" v-if="imageUrl"> </template> import { ref } from 'vue' import { get } from '@/...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值