vue-cli项目中img使用require动态获取图片

已于 2022-07-28 14:21:27 修改
阅读量1.2w 收藏 13
点赞数 8
分类专栏： vue 文章标签： vue.js javascript 前端
于 2019-06-21 10:21:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Y_Cfeng/article/details/93166355
版权

做图片渲染模块时，可能涉及到需要循环渲染的问题，这个时候需要使用require,具体就看下面？？？？？
动态获取图片地址，路径被加载器解析为字符串，图片找不到
这里放图片

在这里插入图片描述
这里在motheds 中定义了个方法获取
在这里插入图片描述
这样就可以了。。。。。

余人于RenYu
关注
  • 8
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
VUE中的img的:src动态加载图片的问题，require也不能随便用
曾某人的博客
09-22 7920
问题描述： 写的一个系统，用户登录后会使用数据库的数据作为用户头像，需要显示在页面上，那头像链接就需要用变量表示，那就用到了:src做动态绑定，直接加变量 问题解决： 1、使用require 由于我们在写代码用的链接是编译前的，编译后图片文件，require中直接写死是没有错误的（里面全是字符串的话），但是如果只用一个变量，就会报错 2、使用require的小技巧 查找到了一篇有用的教程——前端es6 require动态引入图片报错Error: Cannot find module ，“因为require它
VUE-使用img标签时，+require动态设置图片地址
LzzMandy的博客
06-22 8090
<div class="selector"> <img src="/images/one.png""/> </div> 用上面这种方式时，图片会显示出来，但有时间我们需要根据一个标志来设置具显示的哪一张图片，如下： //dom 部分 <div class="selector"> <img :src="flag?...
vue中动态引入图片地址需要用require
最新发布
weixin_44799030的博客
04-22 344
如果icon的地址是相对于项目根目录的路径,动态引入图片地址时需要添加require()
img动态src地址要加require
haohaoxueqd的博客
11-08 1484
img 动态src 写require
vue 组件中图片地址，图片获取
cvper's world !
05-05 5634
前提：在组件中使用引用图片，用于&lt;img src&gt;  或者  背景图片background;当我们利用vue-cli 搭建好项目的框架，开始高高兴兴开发组件的时候，有的时候想加一张图片，或者在样式中加个背景，会发现，图片引用不进来，这可愁坏了不是；组件中引用图片用于 &lt;img src="???"&gt;使用图片之前，我们可以这么做，在组件的script 中引入图片，下面示例引入一...
vue src动态加载请求获取的图片
热门推荐
kylvia的专栏
05-18 6万+
一. 加载本地图片 1.图片目录 2. 在data中配置图片路径 data() { return { formData: { avatar: require('@/assets/icon1524737568182.png'), motto: 'xxxxxxxxxx' }, ...
前端vue-cli项目中使用img图片和background背景图的几种方法
10-16
以下将详细介绍如何在Vue CLI项目中使用这两种类型的图片。 1. **使用img标签** 当需要显示图片作为内容时，通常会使用`<img>`标签。在Vue CLI项目中，图片的引用路径需要注意。Vue CLI推荐将静态资源放在`public/...
vue-cli3中配置alias和打包加hash值操作
10-14
在 Vue CLI 3 的示例中，对于图片、音频、视频和字体文件的配置，我们使用了 `hash` 来确保当这些静态资源改变时，它们的 URL 也会随之更新： ```javascript { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: '...
使用vue-cli打包过程中的步骤以及问题的解决
08-27
在使用Vue CLI进行项目打包的过程中，开发者通常会遇到一系列步骤和问题。本文将详细解析这些步骤和常见问题的解决方案。 1. **打包命令**：在Vue CLI项目中，执行打包操作的命令是`npm run build`。这个命令是基于...
解决vuecli3中img src 的引入问题
10-15
在Vue CLI 3中，处理`img src`的引入问题主要涉及到项目中静态资源的管理。Vue CLI 3改变了之前的目录结构，导致一些在Vue CLI 2中可行的引用方式可能不再适用。以下是对这个问题的详细解答： 1. **在模板中直接...
java 获取img src_img的src地址是一个请求的方式来显示图片方法
weixin_33704298的博客
02-21 1635
1、jsp2、controller@requestmapping("getimg2")public void getimg2(httpservletrequest request, httpservletresponse response)throws ioexception {fileinputstream fis = null;outputstream os = null;try {fis =...
利用img请求一个html页面,爬虫学习笔记——爬取单个网页里的所有图片（入门）...
weixin_39779528的博客
06-04 733
最近闲着，想学一下爬虫 (＾－＾)V ——[手动比耶]先从简单的练习开始吧~ 爬取单个网页里的所有图片，这个没有什么难点，因为不需要翻页哈哈哈哈。我很喜欢一些文章中的配图，比如这篇，里面就会有很多电影中的经典截图。第一步：分析网页首先需要了解要爬取网站的页面，查看网页源代码。然后根据网页源代码的结构，想好代码的步骤和思路。在网页中查看页面的源代码(F12)先来看一下页面的请求方式：在开发者模式的N...
前端IMG图片通过src属性请求后台的方式加载图片，请求只进行一次
tonglei111的博客
10-17 2万+
收到一个需求就是展示流程图，正在运行的节点显示高亮。在网上提供了很多的解决方案，这里就不讲解实现方法了；我用的是前段使用img图片，通过src属性请求后台查询资源图片的方案； &lt;img id="processImg" width="100%"/&gt; &lt;script&gt; $("#processImg").attr("src","getActivitiPro
src标签动态传入图片地址
liuzh的博客
06-14 3937
<img src="{{ url_for('static', filename='image/') }}{{ context.projectname + '.png' }}" >
动态的设置<img>的src地址
hzp666的博客
02-22 9740
html> head>   head> body>   img src="?"  id="imgInit">   body> script language="javascript"> var adres="图片地址"; document.getElementById('imgInit').src = adres;  
Vue中动态（import 、require）显示img图片
weixin_30569153的博客
08-01 2663
vue中，经常会遇到显示图片的问题， 如果是一个普通组件的话，那么这样就可以了 <img src="../assets/images/avtor.jpg" width="100%"> 上文的弊端有两个： 首先，是采用绝对路径引入。如果以后图片移动了位置，需要修改代码。 其次，如果说图片是一个logo图片，同一页面内有多处用到。就需要引用多次，同理...
Vue.js 图片不显示 | 图片资引用 | img src 路径出错
h5css3_linhuai的博客
06-07 1万+
解决方法：       1、在data 里写入  logo: require('../assets/images/logo.png')       2、在模板中写入
webpack 处理html中img的src引入的图片
wzs_xyz的专栏
06-23 3万+
webpack在管理模块，处理各种资源上都是无往不利，但唯独在处理html上比较困难，不识别html中img标签src引入的图片。 html-webpack-plugin这种插件辅助处理html非常好，但却仍然未解决html代码中的图片问题，未免美中不足。在遍寻开源模块无果后，认真研究webpack的loader和plugin后，终于解决了这个问题。从npm安装模块npm i html-withi
vue-cli将gif转成base64格式
08-14
要将GIF转换为base64格式，您可以采取以下步骤： 1. 安装vue-cli命令行工具。可以使用npm（Node Package Manager）来全局安装vue-cli，使用以下命令安装： ``` npm install -g @vue/cli ``` 2. 创建一个新的Vue项目。使用vue-cli创建一个新的Vue项目，使用以下命令： ``` vue create my-project ``` 3. 进入项目目录。使用以下命令进入刚才创建的Vue项目目录： ``` cd my-project ``` 4. 将GIF文件放置在项目的assets文件夹中。将要转换的GIF文件复制到项目的assets文件夹中。 5. 在Vue组件中使用转换的GIF文件。在Vue组件中引入GIF文件，并将其转换为base64格式。您可以在Vue的template部分使用该文件，如下所示： ```html <template> <div> <img :src="gifDataUrl" alt="GIF Image"> </div> </template> ``` 6. 在Vue组件的script部分进行GIF转换。在Vue组件的script部分，使用以下代码将GIF转换为base64格式： ```javascript export default { data() { return { gifDataUrl: null } }, created() { this.convertGifToBase64(); }, methods: { convertGifToBase64() { const file = require('@/assets/image.gif'); const reader = new FileReader(); reader.onloadend = () => { this.gifDataUrl = reader.result; }; reader.readAsDataURL(file); } } } ``` 7. 运行Vue开发服务器。使用以下命令在开发模式下运行Vue开发服务器： ``` npm run serve ``` 8. 打开浏览器查看结果。打开浏览器并在地址栏中输入http://localhost:8080（具体端口号可能会有所不同），查看转换后的GIF图片。 这样，您就可以使用vue-cli将GIF文件转换为base64格式了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值