vue 图片动态路径不生效

最新推荐文章于 2024-08-07 16:53:25 发布
最新推荐文章于 2024-08-07 16:53:25 发布
阅读量456 收藏
点赞数
分类专栏： 前端 vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_41374628/article/details/115219766
版权

需要使用require将图片引入，然后当作一个变量使用

 <img :src="require(`@/assets/images/list/${key.icon}`)"  alt=""  srcset="" />
自己解决在Vue中动态渲染图片不显示的问题
张浔优快云
05-12 1万+
乐于助人前言分析思路1. 绝对路径2. 相对路径总结 本篇文章记录的是自己在 Vue-Cli2 中如何去解决的这个问题，心里路程比较多，所以话比较多哈哈，感谢阅读，大概耗时2分钟 前言 如上图所示，我的图片就是储存在了 assets/images/ 目录下 ，但是结果不显示，这个问题其实早就遇到了，当时查阅资料之后就解决了，大概原理也不是很深，解决的方式也并不复杂，所以就没有记录，但是今天写了一个小案例时，这个问题冒出来给我整郁闷了，我怀疑是不是自己记错了解决的方式了，我去查资料，并没有什么问题，最
Vue动态设置img的src不生效的问题
Celester_best的博客
06-21 5116
在vue项目中动态设置img的src时，图片会加载失败。我们可以先看个例子。 由结果可以看出图片加载失败。查看elements之后会发现，src被当做静态资源处理了，并没有进行编译。 为了解决动态的src没有进行编译的问题，我们可以使用require引入图片。 可以看到使用require引入图片之后，图片就可以正常加载出来了。require是在运行时加载，而import是编译时加载；如果希望使用import引入图片就需要提前导入图片。 另外require和import另外的区别：requir
javascript动态改变img的src属性图片不显示的解决方法
12-08
首先讲下这个bug的出现的情况，页面中有 代码如下:<a> 这么一个a标签，onclick中的JS代码就是改变id为current的img标签的src属性，以达到动态切换图片的效果。可是不幸的是：IE是动态改变的图片的路径，但是图片却不显示出来，得右键“显示图片”才能看到改变后的图片，不知是什么原因，但据说是<a>或者<a>这样使用a标签的
解决 vite 构建 vue3 项目 “@/“相对路径无法生效并报错
m0_68196864的博客
12-22 2686
第二步：在 vite.config.js 文件中添加以下三部分代码。第一步：安装 path 包。
Vue动态设置img的src不生效
一只想躺平却不敢躺平的小菜鸟
05-09 1479
Vue动态设置img的src不生效
vue项目路径使用@报错
weixin_46886988的博客
08-07 796
vue项目路径使用@报错
vite+vue3使用@路径，报错处理
m0_70547044的博客
08-21 2601
报错原因：未配置 @符号为指定路径别名，直接使用导致。
vue 解决data中定义图片相对路径页面不显示的问题
10-14
总结，当在Vue的data中定义图片路径并遇到显示问题时，可以尝试使用绝对路径或通过 `require` 动态引入。同时，配合Webpack的别名配置，可以进一步优化代码的可读性和可维护性。确保正确理解Vue对静态资源的处理方式...
解决vue addRoutes不生效问题
10-14
然而，有时可能会遇到`addRoutes()`不生效的问题，导致新添加的路由无法正常工作。 **问题起因：** 当动态添加路由后，如果不正确地处理路由生命周期，特别是在用户登出再登录时，可能会导致路由冲突。例如，如果在...
vue中img src 动态加载本地json的图片路径写法
10-17
在Vue.js应用中，我们经常需要动态加载图片，特别是在处理数据源时，这些数据源可能包含图片路径。本文将深入探讨如何在Vue中使用`img`标签的`src`属性动态加载本地JSON文件中存储的图片路径。 首先，重要的一点是...
解决Vue打包上线之后部分CSS不生效的问题
10-16
总的来说，解决Vue打包后CSS不生效的问题，需要从CSS处理、压缩设置、Source Map配置以及代码本身等多个角度去排查。通过合理的配置和调试，我们可以确保应用在生产环境下的样式表现与开发环境保持一致，为用户提供...
解决svg中使用渐变色和阴影导致路径不显示的问题
花落微凉梦清幽的博客
12-08 1856
解决svg使用线性渐变色时不显示路径的问题
【27前端】base标签带有href属性会让chrome里的svg元素url失效
weixin_30868855的博客
07-28 246
一个chrome的问题，但具体原因不明。 触发条件：chrome浏览器base标签里href属性有值的时候 触发问题：svg里面的元素如果有用url的滤镜和模糊，则会失效，在firefox里和IE10没有发现这个问题。 正常状态： 有base标签且href里值为“.”的时候chrome里的状态： 测试代码： <!doctype html> <html&...
vue 加载图片使用@路径加载不出来
坐等夕阳落time的博客
10-14 3456
vue 加载图片使用@路径加载不出来
vscode 中vue导入模块的@路径提示以及采用@后报错显示not found
Hannah_Hannah_的博客
06-13 7365
上图点击【扩展设置】后进入下图点击上图的【步骤 2】之后，进入下图的 【settings.json】文件中，添加下列框出的代码、 以上是下载的插件的基本配置接下来是取别名的配置如果没有jsconfig.json文件，那就自己建一个（！！！名字要一摸一样） 以上情况就基本上成功了，如果@路径还不生效的话 ，看看自己的文件中是否使用了tsconfig.json文件， 如果有的话，需要在tsconfig.json中添加配置 "allowJs": true， 最后就成功啦！！！！！.........
vue在css中使用@路径报错问题
zhufan2333的博客
10-12 2633
vue.config.js配置@不对style部分的css生效。css loader 会把把非根路径的url解释为。， 加~前缀才会解释成模块路径（~@代表根路径）。
vue :src 引入图片的变量不生效怎么解决？
weixin_44166439的博客
04-15 1268
把图片地址里的@/ 拿出来和后面的拼接就可以生效 注意图片地址 @/要去掉
vue3路由缓存不生效
最新发布
04-03
### Vue3 中路由缓存不生效的解决方案 在 Vue3 的开发过程中，`keep-alive` 是一种常用的机制来实现组件的状态保持和性能优化。如果 `keep-alive` 缓存功能未能正常工作，则可能是由于以下几个常见原因引起的。 #### 1. 组件名称未正确定义 当使用 `keep-alive` 并通过 `include` 属性指定需要缓存的组件时，必须确保这些组件具有正确的名称。在 Vue3 中，尤其是采用 `setup` 语法糖的情况下，默认不会自动定义组件名[^3]。因此，开发者需手动为组件设置 `name` 属性： ```javascript <script> export default { name: 'YourComponentName', // 明确命名组件 setup() { // 其他逻辑... } } </script> ``` 如果不显式声明 `name`，则可能导致 `keep-alive` 的 `include` 或 `exclude` 配置无法匹配到目标组件，从而使得缓存失效。 --- #### 2. 路由配置问题 在某些框架（如 Ant Design Pro Vue）中，动态加载的路由可能会导致组件的实际名称与预期不符。例如，路径 `/template-allocation/index.vue` 自动生成的默认组件名为 `Index`，而非路由对象中的 `name` 值。这会进一步影响 `keep-alive` 对特定组件的选择性缓存能力。 为了验证当前组件的真实名称，可以通过调试工具打印其元数据： ```javascript console.log(this.$options.name); // 查看实际组件名称 ``` 随后调整 `include` 列表以适配该真实名称。 --- #### 3. 生命周期钩子未触发的原因分析 即使启用了 `keep-alive`，但如果生命周期钩子（如 `onActivated` 和 `onDeactivated`）未被调用，可能是因为以下原因之一： - **缺少 `v-if/v-show` 控制**：只有受控于条件渲染的节点才会经历激活/停用过程。 - **父级容器未包裹 `<keep-alive>`**：确保目标组件确实嵌套在有效的 `keep-alive` 标签内部[^2]。 以下是标准写法示例： ```html <template> <div id="app"> <router-view v-slot="{ Component }"> <keep-alive :include="['YourComponentName']"> <!-- 使用具体组件名 --> <component :is="Component" /> </keep-alive> </router-view> </div> </template> ``` 上述代码片段展示了如何利用 `v-slot` 动态绑定 `RouterView` 至 `keep-alive`，并结合 `include/exclude` 参数精确控制哪些组件应参与缓存。 --- #### 4. 检查全局状态管理的影响 有时，应用层面的状态管理系统（如 Vuex 或 Pinia）也可能间接干扰局部组件的行为模式。假如某个共享变量意外重置了依赖的数据上下文，则即便视图本身得以保留，仍可能出现视觉上的“刷新”现象[^1]。对此建议排查业务逻辑是否存在不必要的副作用操作。 --- #### 总结 综上所述，解决 Vue3 中 `keep-alive` 路由缓存不生效的核心在于确认三点： 1. 是否正确设置了待缓存组件的名字； 2. 父层模板是否合理运用了 `keep-alive` 包裹； 3. 排除其他潜在因素对整体流程造成的阻碍。 只要逐一核验以上环节即可定位根本症结所在，并采取相应措施修复之。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值