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

目录
  • vue-cli中img使用require动态获取图片
  • vue-cli中图片显示问题
    • 1.手动引入
    • 2.相对路径
    • 3.绝对路径
    • 4.数据data中的图片

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目录中

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 基于vue 动态加载图片src的解决方法

    基于vue 动态加载图片src的解决方法

    好久没更博了,最近也不知道在忙啥,反正就是感觉挺忙的,在群里看到陆陆续续有刚入vue小伙伴问vue动态加载图片总是404的状况,这篇就简单的说明为什么会出现以及解决办法有哪些. 首先先说明下vue-cli的assets和static的两个文件的区别,因为这对你理解后面的解决办法会有所帮助 assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src="./logo.png">和background:url(./logo.p

  • 浅谈在vue-cli3项目中解决动态引入图片img404的问题

    博主最近手头再做一个项目,需要调用天气接口,并且还要动态显示天气相关图片icon. 本来以为没什么大问题,结果硬生生被这个动态图片路径搞得民不聊生(博主还是 too young,too simple~),给出效果图: 就是那个红框选中的那个天气状况图标icon要根据当前城市获取当前城市天气状态码,再根据当前城市状态码找到这个对应的天气图标icon~~ 按照一般的开发模式,静态图片路径是相对路径还是绝对路径都可以,因为图片路径是静态的是死的,所以webpack去找这个图片路径的时候是能找到的. 但

  • 彻底搞懂并解决vue-cli4中图片显示的问题实现

    在基于 vue-cli 实际开发过程中,很多小伙伴都会遇到关于图片显示的困扰,不管怎么设置,图片就是显示不出来,今天我们来详细说说这个问题. 图片无法显示,绝大部门的情况是图片路径问题,要搞懂路径问题,分别有相对路径与绝对路径 实际开发中使用图片最多的场景有以下三种: 1.手动引入 <template> <img :src="imgurl" /> </template> <script> import logo from '../img/

  • 前端vue-cli项目中使用img图片和background背景图的几种方法

    前端中背景图片极其常用,但是很容易出现各种问题. 一种是脚手架本身资源引用方式的问题,如指定静态资源文件夹. 一种是图片资源引入方式,有时候使用绝对或者相对路径会导致错误. css方法 正常使用background属性即可. 如有问题,应把图片资源放入static静态资源文件夹,不是assets之类的其他文件夹. <div class="bgImg"></div> <style> .bgImg{ background-image:url("

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

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

    目录 vue-cli中img使用require动态获取图片 vue-cli中图片显示问题 1.手动引入 2.相对路径 3.绝对路径 4.数据data中的图片 vue-cli中img使用require动态获取图片 做图片渲染模块时,可能涉及到需要循环渲染的问题,这个时候需要使用require,具体就看下面????? 动态获取图片地址,路径被加载器解析为字符串,图片找不到 这里在motheds 中定义了个方法获取 这样就可以了..... vue-cli中图片显示问题 在基于vue-cli实际开发过程

  • JS中通过url动态获取图片大小的方法小结(两种方法)

    很多时候再项目中,我们往往需要先获取图片的大小再加载图片,但是某些特定场景,如用过cocos2d-js的人都知道,在它那里只能按比例缩放大小,是无法设置指定大小的图片的,这就是cocos2d-js 的坑了,我们必须先获取图片大小,计算比例再对图片进行缩放. 查阅资料,我总结了两种通过url获取图片大小的方法: 1.预加载获取图片大小 var imgLoad = function (url, callback) { var img = new Image(); img.src = url; if

  • Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)

    Vue-CLI项目-axios模块前后端交互(类似ajax提交)08.31自我总结,内容如下: Vue-CLI项目-axios前后端交互 一.模块的安装 npm install axios --save #--save可以不用写 二.配置main.js import axios from 'axios' Vue.prototype.$axios = axios; 三.使用 created() { // 组件创建成功的钩子函数 // 拿到要访问课程详情的课程id let id = this.$ro

  • vue cli webpack中使用sass的方法

    1:安装依赖 npm install sass-loader node-sass --save-dev 2:html中 修改style <style lang="sass"> /* write sass here */ </style> 3: 使用正常sass 语法 //但是会报错 <style lang="sass"> $highlight-color: #F90; $highlight-border: 1px solid $h

  • 详解vue在项目中使用百度地图

    详解vue在项目中使用百度地图

    第一步,去百度地图开发者申请秘钥. 第二步在项目中引入,具体如下 其中index.html存放地图链接,代码如下 然后在APP.vue里面实现,代码如下 <template> <div id="app"> <div id="allmap" ref="allmap"></div> <router-view></router-view> </div> </tem

  • vue+element项目中过滤输入框特殊字符小结

    可以在main.js中写入方法 Vue.prototype.validSe = function (value, number = 255) { value = value.replace(/[`-*~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~!@#￥%--&*()--\-+={}|<>?:""[].:'',..]/g, '').replace(/\s/g, ""); if (value.

  • 解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题

    vue +webpack 项目中数据更新后页面没有刷新问题,ie11下,如果GET请求请求相同的URL,默认会使用之前请求来的缓存数据,而不会去请求接口获取最新数据,我用的解决方法是在每个请求发送前,拦截请求并给请求接口的URL后加一个时间戳(new Date().getTime()),这样就保证了每一次请求的URL都不同,ie11就会不断的请求接口而不使用缓存数据. 代码如下 if(config.url.indexOf('?')>-1){ config.url = url + config.u

  • Vue.js项目中管理每个页面的头部标签的两种方法

    在 Vue SPA 应用中,如果想要修改 HTML 的头部标签,如页面的 title ,我们只能去修改 index.html 模板文件,但是这个是全局的修改,如何为每个页面都设置不一样的 title 呢?下面介绍两种方法. 使用router.meta 在路由里面配置每个路由的地址: routes: [ { /* (首页)默认路由地址 */ path: '/', name: 'Entrance', component: Entrance, meta: { title: '首页入口' } }, {

  • 利用Vue3 创建Vue CLI 项目（一）

    利用Vue3 创建Vue CLI 项目（一）

    目录 一.官方文档 二.创建Vue CLI项目 1.安装Vue CLI 2.创建web应用 3.启动web应用 三.Vue CLI项目结构讲解 一.官方文档 Vue3文档 - vuejs https://www.vue3js.cn/docs/zh/ Vue核心功能:数据绑定 Vue CLI文档 https://cli.vuejs.org/zh/guide/ Vue CLI = Vue.js + 一堆组件 二.创建Vue CLI项目 1.安装Vue CLI 淘宝镜像 SQL: npm get re

  • Vue开发项目中如何使用Font Awesome 5

    Vue开发项目中如何使用Font Awesome 5

    目录 安装依赖 配置 使用 1. 进入图标搜索页 2. 输入想使用的图标的英文,例如用户的英文是 user 3. 过滤收费图标 4.点击图标查看 5. 查看结果 总结 Font Awesome 官网:https://fontawesome.com/ 前端小伙伴们都知道Font Awesome图标库,它具有丰富的常用图标,笔者开发时也经常使用,省却了自己到处找图标的困扰,当然阿里的iconfont也不错,不过它比较杂乱,找的图标有时候不是配套的,尺寸和比例上有些偏差,即使你只使用某一个图标库的图标

随机推荐