vue-cli项目中img如何使用require动态获取图片
vue-cli中img使用require动态获取图片
做图片渲染模块时，可能涉及到需要循环渲染的问题，这个时候需要使用require,具体就看下面？？？？？
动态获取图片地址，路径被加载器解析为字符串，图片找不到
这里在motheds 中定义了个方法获取
这样就可以了。。。。。
vue-cli中图片显示问题
在基于vue-cli实际开发过程中，经常遇到关于图片显示的困扰，不管怎么设置，图片就是显示不出来，今天就来简单说一下这个问题
实际开发环境中使用图片最多的场景有以下三种：
1.手动引入
<template>
<img :src="imgurl" />
</template>
<script>
import logo from "../img/logo.png";
// 或
const logo = require("../img/logo.png");
export default {
data() {
return {
imgurl: logo,
};
},
};
</script>
【注意：使用require或import方式引入图片时，引入路径是相对于当前文件路径的，编译时webpack会介入并把路径处理成服务器绝路径】
2.相对路径
<img src="../img/logo.png" />
在 vue-cli 中使用相对路径时，webpack 会自动介入，上面的代码在编译时自动变成
<img src="require('../img/logo.png')"/>3.绝对路径
<img src="/img/logo.png" />
使用绝对路径，首先要了解服务器根目录在哪，大家都知道，在vue-cli的项目本身自带一个服务器的，基于webpack-dev-server模块，根目录为public文件夹，所以，使用绝对路径的方式展示图片，必须把图片放到public文件夹，这也是最简单的一种方式，这种方式webpack不会介入，所以最终显示效果与引入时的代码一致，代码如下：
const logo = require('../assets/logo.png');
<img src="/img/logo.png" />
<img src="../assets/logo.png" />
<img :src="logo" />效果如下：
4.数据data中的图片
<template>
<ul>
<li><img :src="item.imgurl" v-for="item in goodslist" /></li>
</ul>
</template>
<script>
export default {
data() {
return {
goodslist: [
{ name: "goods1", imgurl: "../img/goods1.png" },
{ name: "goods2", imgurl: "../img/goods2.png" },
{ name: "goods3", imgurl: "../img/goods3.png" },
],
};
},
};
</script>
这种情况应该是最常见的（ajax请求数据回来，然后遍历写入到页面结构中），这个时候绑定到src属性的是一个变量，无法直接手动import或require，如果直接使用imgurl属性中的路径，webpack不会介入处理，所以以上代码是无法正常显示图片的【当然首先图片是没有防盗链的】，解决方法如下：
解决方法一
this.goodslist = this.goodslist.map(item=>{
//虽然路径是正确的，但以下方式引入会报`Cannot find module '../assets/logo.png'`
// item.imgurl = require(item.imgurl);
// 正确的方式为
item.imgurl=require('../img'+item.imgurl.replace('../img','')) return item; })遍历数据，使用前先手动 require
解决方法二
在数据库端直接使用绝对路径，并把所需图片放到 public目录中
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文是脚本之家小编给大家带来的使用vue与jquery实时监听用户输入状态，实现效果是input未输入值时，按钮禁用状态，具体操作代码大家参考下本文吧2017-09-09
下面小编就为大家分享一篇使用vue toggle实现点击切换class的示例。具有很好的参考价值。希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
vue中使用百度脑图kityminder-core二次开发的实现
这篇文章主要介绍了vue中使用百度脑图kityminder-core二次开发的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
防抖节流是可以说是一种优化组件性能的技巧,可以有效减少组件中的渲染次数和计算量,本文主要介绍了Vue3项目中使用防抖节流的实现示例,感兴趣的可以了解一下2024-04-04
这篇文章主要介绍了vue中v-for通过动态绑定class实现触发效果,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-12-12
html和vue都是前端技术中非常重要的一部分,其中html是web开发的基石,而vue则是现代化的前端开发框架之一,下面这篇文章主要给大家介绍了关于如何将HTML页面改写到vue项目中的相关资料,需要的朋友可以参考下2024-08-08
Vue如何通过Vue.prototype定义原型属性实现全局变量
在Vue.js开发中,通过原型属性为Vue实例添加全局变量是一种常见做法,使用$前缀命名,可以避免与组件内部的数据、方法或计算属性产生命名冲突,这种方式简单有效,确保了变量在所有Vue实例中的可用性,同时保持全局作用域的整洁2024-10-10
Vue封装组件利器之$attrs、$listeners的使用
vue通信手段有很多种,props/emit、vuex、event bus、provide/inject等,还有一种通信方式,那就是$attrs和$listeners,下面这篇文章主要给大家介绍了关于Vue封装组件利器之$attrs、$listeners使用的相关资料,需要的朋友可以参考下2021-12-12
这篇文章主要介绍了使用webstorm配置vue+element开发环境，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
上一篇我们安装了vue-cli，接下来我们就使用该脚手架进行创建项目，这篇文章主要介绍了vue-cli创建项目以及项目结构的相关资料,需要的朋友可以参考下面文章的具体内容2021-10-10
最新评论