关于JS动态渲染找不到图片路径，需要用require的问题及注意事项（简单明了，一看就会）

最新推荐文章于 2024-06-26 09:56:46 发布
最新推荐文章于 2024-06-26 09:56:46 发布
阅读量681 收藏 8
点赞数 9
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64789429/article/details/135367854
版权

@require用法和注意事项

很多时候需要for循环动态的渲染不同的图片，但是直接写img:'/static/index.png' 是没有效果的

这个时候就需要用@require

需要注意：如果是根路径前面不需要加 ' / ' ,否则会找不到该图片

用法如图：

lk_self-discipline
关注
  • 9
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
关于使用require加载动态路径的图片
RussW0的博客
10-10 3298
<img v-for="(el,index) in list :src="el.img_url" :key="index" /> //处理图片路径 this.list.forEach(el=>{ let img = null; try { img = require('@/assets/images/'+el.img_name+'.png') } catch (err) {//图片不存在则使用默认的图片 img = require('@/
vue 解决data中定义图片相对路径页面不显示的问题
10-14
在Vue开发过程中，我们常常会遇到在data对象中定义图片路径，然后在模板中使用这些路径来显示图片的情况。然而，有时会遇到图片无法显示的问题，这通常是因为Vue对静态资源的处理方式导致的。本文将深入探讨这个问题...
问题描述：vue项目中引用data中的图片路径无法显示
weixin_45629646的博客
03-01 965
vue项目中引用data中图片路径无法显示
【JS问题】require相对路径引入模块
最新发布
曲江涛的博客
06-26 374
在ES6及以后版本中，推荐使用const和let来代替var，因为它们提供了块级作用域，可以减少很多由作用域引起的潜在问题。1、使用绝对路径：通过path.resolve和__dirname组合使用，构造了绝对路径，这样即使文件位置发生变化，也可以确保模块被正确加载。使用绝对路径：考虑使用Node.js的path模块或使用__dirname来构造绝对路径，这样可以避免因文件位置变动导致的路径错误问题。改善变量命名：使用更具描述性的变量名，例如paramService，这样可以提高代码的可读性。
解决js中获取不到图片路径的情况
weixin_58430903的博客
06-22 2101
绝对路径与相对路径
vue引用require图片路径时，当找不到此图片时，报错解决方法
u014266734的博客
07-21 797
vue引用require图片路径时，当找不到此图片时，报错解决方法
根据一个信息匹配显示不同的图片。在vue项目中如果想在data里面定义图片就必须加上require(图片路径)
肖肖肖丽珠的博客
12-25 3204
比如，我的课程有语文数学英语。对应的有三张图片。我要显示他相应的图片。 这个时候我们可以用对象的键值对来写，键代表科目。值就是图片的地址 定义    src:{"语文":require("../../../../assets/H5/H5set.png"),"数学":require("../../../../assets/H5/H5set.png"),"英语":require("../../..
vue项目中通过require引入静态图片路径
weixin_46125684的博客
12-01 1917
vue项目中通过require引入静态图片路径
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
08-28
在Vue.js框架中，动态绑定图片是常见的需求，特别是在数据驱动的应用中，图片路径可能根据用户操作或后台数据的变化而变化。本篇文章将详细介绍如何在Vue中动态绑定图片以及通过`data`对象返回图片路径的方法。 ...
vue cli3.0打包上线静态资源找不到路径的解决操作
10-15
Vue CLI 3.0 是一个基于 Vue.js 的命令行工具...以上就是关于 Vue CLI 3.0 打包静态资源找不到路径问题的解决方法和相关配置知识。确保正确配置 `publicPath` 并理解其他配置项的作用，有助于顺利部署和运行 Vue 项目。
php使用QueryList轻松采集js动态渲染页面方法
12-20
下面来演示QueryList使用PhantomJS插件抓取JS动态创建的页面内容。 一、安装 使用Composer安装： 1.安装QueryList composer require jaeger/querylist GitHub: https://github.com/jae-jae/QueryList 2.安装...
webpack-require-from：Webpack插件，允许配置路径或URL来获取动态导入
02-06
从webpack要求 在运行时控制动态导入路径/ URL 兼容webpack 5，4，3，2 支持网络工作者加载（ ） 准备生产 没有依赖关系 轻巧的 经过测试 目录 为什么在运行时更改动态导入路径？ Webpack允许使用或 import()原子地拆分和加载代码。 当您的主捆绑包在浏览器中运行时，“按需”获取模块。 Webpack从静态URL加载模块（块），该URL由的config.output.publicPath确定。 有时您需要在运行时控制此模块（块）URL，例如： 块托管在CDN上 不同的环境使用不同的URL来加载资产（生产，暂存，质量检查） 您的index文件是从
问一个关于echarts本地路径的问题
02-21
在探讨“问一个关于echarts本地路径的问题”这个主题时，我们首先需要理解ECharts是什么以及它在前端开发中的作用。ECharts是一个基于JavaScript的数据可视化库，由百度开发，广泛应用于网页图表的绘制，包括折线图...
关于vue打包后图片路径找不到的问题
weixin_30479905的博客
08-07 4765
//asserts引入的静态资源是相对路径 //而static引入静态资源时必须是绝对路径 slides: [ { //当asserts引入动态绑定的静态资源时，需要以模块的方式导入资源， //将图片作为模块加载进去 src: require(‘../../../asserts/img/pic1.jpg’), ...
require图片相对路径时，有些图片能显示，有些不能
shidouyu的专栏
01-06 1712
let img = require(`../assets/images/index/icon_ku.png`) let img2 = require(`../assets/images/index/icon_DB2.png`) console.log(img) // 结果：/img/icon_ku.b259504f.png console.log(img2) // 结果：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAAtCAYAAAD7na..
vue-cli项目中通过require引入静态图片路径的解释
树上骑个猴的博客
01-26 2437
需求： index.vue 怎样能把 assets 里面的图片拿出来加载使用。 在 img 标签中直接写上路径 <img src="../assets/logo.png" alt="" /> 使用变量接收静态图片路径（必须使用 require） <img :src="imgSrc" alt="" /> data() { return { // Vue中js部分引入静态图片，必须使用require引入，否则无法正常显示 imgSrc:require(
Vue图片路径问题（动态引入：绝对路径、相对路径），require动态路径问题
热门推荐
weixin_45768768的博客
12-28 5万+
Vue 图片动态加载问题，require 导入使用变量问题，Vue打包前后文件夹目录比较
前端VUE2使用require请求图片资源，如找不到图片html页面直接报错的处理
m0_70547044的博客
06-13 1264
1 、getImg()为获取图片地址的方法，在标签中直接引用。2、methods里面定义方法getImg()
Vue3无法解析require后动态导入图片路径的解决方案
qq_39123467的博客
06-19 988
Vue3无法解析require后动态导入图片的解决方案
vue require动态路径图片不存怎么使用默认图片
06-02
如果动态路径的图片不存在，你可以使用 `require` 加载一个默认图片来代替。具体实现方法如下： ```javascript <template> <img :src="imgSrc" alt=""> </template> <script> export default { data() { return { imgUrl: 'xxx', // 动态路径 defaultImg: require('@/assets/default.png') // 默认图片路径 } }, computed: { imgSrc() { let img = new Image() img.src = this.imgUrl img.onerror = () => { this.imgUrl = this.defaultImg } return this.imgUrl } } } </script> ``` 上面的代码中，我们先在 `data` 中定义了动态路径 `imgUrl` 和默认图片路径 `defaultImg`。在 `computed` 中，我们通过 `img` 对象的 `onerror` 事件来判断动态路径图片是否存在，如果不存在，将 `imgUrl` 赋值为默认图片路径 `defaultImg`。 这样，在模板中只需要绑定 `imgSrc` 就可以了，如果动态路径的图片存在，就会显示动态路径的图片，如果不存在，则会显示默认图片。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值