2021-11-08 img标签src动态获取时加载不出来问题【require】

最新推荐文章于 2023-06-23 20:57:03 发布
最新推荐文章于 2023-06-23 20:57:03 发布
阅读量1.3k 收藏
点赞数
分类专栏： 十一月份 文章标签： webpack vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43080484/article/details/121212330
版权

v-for循环img路径时，直接写字符串地址是加载不出来的。
比如：

<span v-for ="item in imgs" :key="item">
    <img :src="item">
</span>

imgs: [
	'../assets/img/login1.png'，
	'../assets/img/login2.png'
]

由于Vue最后是基于 webpack 打包文件的，我们本地的路径 在webpack打包之后， webpack会解析它为模块依赖 ，文件路径就会出错
在这里插入图片描述

解决方法1：

imgs:[
	require('@/assets/img/login1.png'),
	require('@/assets/img/login2.png')
]

解决方法2：
放在static文件夹

一只白猫罢了
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Vue】img使用 :src 动态绑定图片地址，但是加载图片不成功
weixin_57509111的博客
05-20 396
img标签直接动态绑定图片的相对路径的时候，图片不能正常显示。引入才能成功，就可以动态使用了。设置绝对路径或者相对路径是改为用。动态地址，路径被加载器解析为。
Vue数据绑定img标签的src属性，需要用require包裹
qq_38134913的博客
09-23 1万+
vue里面将img标签的src属性动态绑定到一个数组上，发现:src=’ '并没有软用，查了一些文章，终于发现是要用require包裹起来才行！ <template> <div > <div v-for="item in img_list" :key="item.index"> {{item.title}} ...
解决javascript动态改变img的src属性图片不显示问题
ikmb的专栏
08-05 1万+
首先讲下这个bug的出现的情况，页面中有‘images/001.jpg’;“>这么一个a标签，onclick中的JS代码就是改变id为current的img标签的src属性，以达到动态切换图片的效果。可是不幸的是：IE是动态改变的图片的路径，但是图片却不显示出来，得右键“显示图片”才能看到改变后的图片，不知是什么原因，但据说是或者这样使用a标签的话并不能阻止a标签最后触发一个什么行为，
ie6,7下js动态加载图片不显示错误
流水账
05-24 2432
做了一个商品详情页面，先加载几个小图片，然后点击显示大图，html如下：align="middle" />用js写的，如下：function loadimg(_big, _obj) { $("#midimg").attr("src", _obj); }结果ie6、7都不正常。换了种
JavaScript动态改变img中src不显示问题
littleAsavakit的博客
01-22 1830
如题 代码关于一个验证密码框 请输入六到十位密码
vue src动态加载请求获取图片的方法
10-17
本篇文章将详细讲解如何在Vue中通过`src`属性动态加载本地图片和请求获取的图片。 一、加载本地图片 1. **图片目录结构**： 通常，我们会在项目的`src/assets`目录下存放项目中的静态资源，包括图片。例如，你...
vue中img src 动态加载本地json的图片路径写法
10-17
需要注意的是，由于图片路径是在运行时动态加载的，所以我们需要使用`require`函数，并且路径前要加上别名`@/assets/img`，这里的`@`别名通常指向`src`目录。 如果图片路径是固定的，可以直接在`src`属性中写入图片...
Nuxt v-bind绑定img src不显示的解决
01-21
如果你写成动态的，webpack就不会进行编译，原封不动的把’~/assets/img/home.png’ 放到你图片的src里面，’http://xxx.xxx.xxx/~/assets/i…’不存在这张图片！ 解决方法1： 把图片存在服务器，使用网络路径， ...
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
11-20
imgSrc写成require(‘path’)； 原因： 动态添加src被当做静态资源处理了，没有进行编译 npm run build 后出现 xxxxxxx net::ERR_FILE_NOT_FOUND 解决办法： 进入：build文件夹 > 打开 webpack.prod.conf.js ...
解决vue的 v-for 循环中图片加载路径问题
10-18
在Vue中，我们可以动态绑定`img`标签的`src`属性到一个变量上，如下： ```html <img :src="item.EnName + '.jpg'" alt="flowers"> ``` 这里的`item.EnName`代表了图片的英文名称，假设图片文件名与英文名称相同，...
基于vue 动态加载图片src的解决方法
08-28
当我们使用 Vue 编写项目时，经常会遇到图片加载不出来的问题，特别是在使用 webpack 构建项目时。这是因为 webpack 会将图片作为模块来处理，而不是作为静态资源处理。这样就会导致图片加载不出来，返回 404 错误码...
Vue用v-for给循环标签自身属性添加属性值的方法
10-17
在处理图片源`src`时，直接使用相对路径可能会导致找不到图片的问题。这是因为Webpack在构建时不会解析字符串形式的路径。为了解决这个问题，我们可以使用`require()`函数来确保图片路径在编译时被处理为模块引用。...
解决Vue动态加载本地图片问题
10-16
首先，我们遇到的问题是当尝试使用`v-bind`（简写为`: `）动态绑定`img`标签的`src`属性时，图片无法正常显示。原因是浏览器没有正确解析图片路径，而是将其作为字符串显示。这是因为Vue编译时没有处理相对路径，...
Vue中img的src属性绑定与static文件夹实例
08-30
Vue 中 img 的 src 属性绑定是指在 Vue 组件中绑定图片的 src 属性，以便正确地加载图片。但是在实际开发中，开发者可能会遇到图片加载失败的问题。本文将介绍 Vue 中 img 的 src 属性绑定与 static 文件夹实例的...
vue-img-loader:这是Vue 2.X的图像加载器UI组件
05-02
script src =" path/to/vue-img-loader.min.js " > [removed] 然后，将其用作任何Vue组件// es6import VueImgLoader from 'vue-img-loader' ;// es5var VueImgLoader = require ( 'vue-img-loader' ) ;new Vue ...
给img标签动态设置src属性，不生效
热门推荐
感恩、奋进、自信
10-29 2万+
给img标签动态设置src属性，不生效js如下： for(var i = 0; i&lt;len;i++){ var data = datas[i]; var nickname = data.nickname; var avatar = data.avatar; var li_item = ''; if(avatar == null){ // ...
JavaScript的img.src属性设置图片无法显示问题
最新发布
qq_51950796的博客
06-23 945
自己遇到的一个错误，记录下来以免再犯。
js 重复动态设置img src没效果 图片缓存问题 解决
Destiny的博客
04-19 2208
今天不知为何掉进了一个坑了 ，就是刷新验证码的时候，用vue 动态设置了img的src属性 在第一次初始化页面的时候可以显示效果来，但是点击刷刷新验证码的时候没有反应，排除了绑定问题。 后来找了一下资料，原来是图片缓存问题 因为每次请求的是同一个地址也就是src值相同，只会请求一个，如果src值不相同的话就会每次都会请求。 解决：在请求路径后面添加一个随机数，对请求接口没有影响。 例子：...
vue3img标签怎么用require
05-20
在Vue.js 3中，使用 `require()` 来加载图片资源已经不再是推荐的方式，而是使用 `import` 语法。因此，如果你想使用 `import` 来加载图片资源，可以按照以下步骤操作： 1. 在Vue组件中，使用 `import` 导入你的图片资源，例如： ```javascript import myImage from '@/assets/my-image.jpg'; ``` 2. 在Vue组件的模板中，使用 `<img>` 标签来渲染图片，例如： ```html <template> <div> <img :src="myImage" alt="My Image"> </div> </template> ``` 3. 在Vue组件的 `data` 选项中，定义一个变量来保存你的图片资源，例如： ```javascript export default { data() { return { myImage: myImage }; } }; ``` 如果你仍然想使用 `require()` 来加载图片资源，可以按照以下步骤操作： 1. 在Vue组件的 `data` 选项中，定义一个变量来保存你的图片资源，例如： ```javascript export default { data() { return { myImage: require('@/assets/my-image.jpg') }; } }; ``` 2. 在Vue组件的模板中，使用 `<img>` 标签来渲染图片，例如： ```html <template> <div> <img :src="myImage" alt="My Image"> </div> </template> ``` 请注意，使用 `require()` 加载图片资源需要使用 webpack 打包工具，并且你需要在 webpack 配置文件中添加相应的加载器。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值