问题描述：vue项目中引用data中的图片路径无法显示

已于 2023-03-01 15:14:43 修改
阅读量1k 收藏 1
点赞数 1
分类专栏： 工作中遇到的小bug 文章标签： vue.js 前端 node.js npm
于 2023-03-01 15:13:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45629646/article/details/129281996
版权

解决办法：因为用普通的路径引入方式动态在模板中使用时会把路径解析为字符串，所以用require来引入就可以解决这个问题。
之前的：无效

在这里插入图片描述
在这里插入图片描述

现在的：生效
在这里插入图片描述

sxl不想学习
关注
专栏目录
vue 直接访问静态图片_在使用vue中实现本地静态图片路径（详细教程）
weixin_39977586的博客
12-20 5025
这篇文章给大家介绍了vue中本地静态图片路径写法及Vue.js中引用图片路径的方式，需要的朋友参考下吧这里写图片描述需求：如何components里面的index.vue怎样能把assets里面的图片拿出来。1.在img标签里面直接写上路径：2.利用数组保存再循环输出： {{ item.title }}data: () => ({carouselData:[{url:require('...
vue中的一些知识
zy的博客
01-26 1117
v-model 多用于表单元素实现双向数据绑定 v-for 格式： v-for="（item,index) in/of 数组json" 循环数组或json v-show 显示内容 ,通过display=block/none来控制元素隐藏出现 v-hide 隐藏内容 同上 v-if 显示与隐藏 （dom元素的删除添加 同angular中的ng-if 默认值为false） v-else-if 必须和v-if连用 v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误 v-bind
vue 项目打包时样式及背景图片路径找不到的解决方式
12-13
问题描述：vue项目打包后，文件找得到，但是引用的字体及背景图片找不到； 解决方法： 主要是需要单独为 css 配置 publicPath 。 ExtractTextWebpackPlugin 提供了一个 options.publicPath 的 api，可以为css单独配置 publicPath 。 对于用 vue-cli 生成的项目，dist 目录结构如下： dist ├── index.html └── static     ├── css     ├── img     └── js 经常遇见的问题是 css 中 background-image 的相对路径不能正确的引用到 img 文
vue引用require图片路径时，当找不到此图片时，报错解决方法
u014266734的博客
07-21 997
vue引用require图片路径时，当找不到此图片时，报错解决方法
vue中动态引入加载图片不显示
最新发布
fxshy的博客
09-15 613
vue中动态加载图片不显示
vue输入图片路径显示不出来（基础问题）
快乐学习
05-14 2470
在vue项目里面插入图片的路径，插入路径方式不正确，导致图片一直不能显示。复制文件中的相对路径，然后去掉上一级目录，用。这是由于相对路径的前面要加上。，这个可以代替第一层包。
vue，在data中引入图片直接写路径不显示图片
pony君的博客
12-06 1094
当你在el-table中或其他情况下使用你在data里面定义的一个数据列表，并且其中包含了图片字段，在data里面赋值的时候，直接写，在渲染的时候发现哎？它*的怎么不生效？我路径没错啊？（当你用线上地址的时候不会出现这个问题）。 解决方法就是，需要你写成这种形式。 以el-table为例：引用的代码 不生效代码： 有效代码：
VUE在data中引入静态图片资源不显示
qq_40740326的博客
03-29 1061
BASE_API: process.env.VUE_APP_BASE_API, // 接口API地址。subjectParentId:'',//一级分类id。subjectId: '',//二级分类id。teacherList:[],//封装所有的讲师。subjectOneList:[],//一级分类。subjectTwoList:[]//二级分类。// 图片路径，static放在src路径下。-- 课程封面-->
vue图片加载失败时用默认图片替换的方法
10-16
在Vue.js应用中，处理图片加载失败的情况是常见的需求，特别是在提供用户界面时，确保即使图片资源出现问题，也能保持良好的用户体验。本篇文章将详细介绍如何在Vue中实现图片加载失败时用默认图片进行替换。 首先...
VUE 之 项目常规配置详解
我的世界我的光彩
03-13 4561
ESLint 是一个开源的 JavaScript 代码检查工具，可以用来检查代码中的潜在问题和风格问题，以确保代码的一致性和可读性。this.$route.params 是一个对象，包含了路由中的动态参数，例如在路由配置中定义了一个动态参数 id，可以通过 this.$route.params.id 来获取该参数的值。在这个例子中，使用 request 拦截器添加了一个认证信息的请求头，在 response 拦截器中处理了响应，如果响应状态码为 200，则返回响应数据，否则返回一个错误的 Promise。
vue打包后css路径_Vue打包后访问静态资源路径问题
weixin_30475939的博客
01-13 2573
Vue打包后访问静态资源路径问题Vue介绍中static文件夹里放的是静态资源目录，如图片、字体等。我们发现运行npm run start后本地图片路径是没问题的，但是打包上传后会怎么样呢？我们知道，执行npm run build 后会生成dist文件夹，把里面的index.html在浏览器运行会发现图片路径出错啦！！！解决方法：1.先找到config下的index.js文件把最后的'/' 改为 ...
vue中，加载稍微大点的图片，本地测试没问题，打包后不显示。
04-12
vue中，加载稍微大点的图片，本地测试没问题，打包后不显示。 1、检查图片是否存在； 2、检查图片引入方式是否正确 import或者require引入 3、图片编码后太大，超过默认设置，需要在 webpack.base.conf.js文件中修改限制。
vue 解决data中定义图片相对路径页面不显示的问题
10-14
主要介绍了vue 解决data中定义图片相对路径页面不显示的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中动态加载图片时，路径正确，但是图片显示失败（已解决）
绝代不风华的博客
06-15 3060
vue中图片动态加载时（我的图片路径存在assets下），发现图片裂开，F12时发现路径和没问题，就是显示失败。 解决办法： 把动态加载图片路径改成require(图片路径) 注意：此处的路径必须改成绝对路径，否则仍会显示失败（我因为没写绝对路径，改了半天）。 示例： 注：我这里使用了方法来拼接图片路径 ...
vue 学习中坑（读取本地的图片，不展示的问题）
汪原野
03-11 2946
1，读取本地图片 如果是在assets里面的图片资源需要require的 <img class="goods-image" :src="require('../assets/'+item.img)" alt="" /> 或者 <img class="goods-image" :src="require('@/assets/'+item.img)" alt="" />...
解决vue项目运行后使用require()图片也不显示方法
z2428478096的博客
11-17 7660
最近在写vue项目时发现一个问题，在项目运行打包后却没有显示图片，明明路径也是正确的。在网上查询大部分文档都是说使用require(‘图片路径’)可以进行解决，运用到项目中发现还是没有用，到后面我对require方法进行查询后，得到了解决办法。 比如：我在assets下的images存放了图片，运行后 这样不显示 解决办法： <img class="headimg" :src="require(imgurl2)">使用require('图片存放目录' + 图片地址...
vue3循环引入图片不显示问题 require无法使用问题
前端程序猿的博客
03-13 1679
【代码】vue3使用require。
vue项目动态引入图片无法显示的问题
qq_53987671的博客
08-01 4089
vue项目动态引入图片不显示的问题解决
vue3 javasript 中引用assets/image下的图片
09-15
在Vue 3中引用assets/image目录下的图片，你可以通过两种方式来实现：一种是在模板中直接使用，另一种是在JavaScript代码中使用。 1. 在模板中引用图片： 在Vue组件的模板部分，你可以直接使用`src`属性来引入图片...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值