Vue项目中v-bind动态绑定src路径不成功问题及解决

 更新时间:2022年04月08日 15:36:24   作者:Mr_Riven  
这篇文章主要介绍了Vue项目中v-bind动态绑定src路径不成功问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

v-bind动态绑定src路径不成功

问题:在做Vue项目的时候,由于项目需求,需要动态绑定img的src时,突然发现如果说是直接请求后台接口的图片地址就能显示,

但是直接动态绑定img的src的图片的相对路径或者是绝对路径的时候,图片不能显示。

解决方案 1

当在给数据MyimgSrc 设置绝对路径或者是相对路径时应该使用require引入才能成功

currentSrc : require("@/assets/1.png")

解决方案 2

直接导入

<img :src="url"/>
import url from '../../assets/logo.png'
data {
    url,
}

解决方案 3

把图片放到static 文件夹里面 就能直接引入

总结:当动态绑定img的src的时候,vue数据绑定图片的相对路径或者是绝对路径的时候,需要require路径。

vue踩坑--动态v-for图片路径问题

问题描述:想要用v-for来动态生成图片路径

<div v-for="item in 40">
	<img :src="'./../../assets/img/' + item + '.jpg'" alt="">
</div>

打包后的路径是这样的

在这里插入图片描述

打包后的资源目录是这样的

在这里插入图片描述

问题所在

上面样写是不行的,你会发现图片在页面中并没有正确显示。从上面的图片可以看出,打包后的图片路径明显不对。     

这是因为webpack并没有对我们拼接的路径进行解析,图片也没有被引用到打包后的目录(如果有的话应该是40张)

vue-cli文档的HTML和静态资源处理里是这么描述的

静态资源可以通过两种方式进行处理:    

在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。

放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝,而不会经过 webpack 的处理。

从相对路径导入    

当你在 JavaScript、CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引用一个静态资源时,该资源将会被包含进入 webpack 的依赖图中。在其编译过程中,所有诸如 <img src="…">、background: url(…) 和 CSS @import 的资源 URL 都会被解析为一个模块依赖。

例如,url(./image.png) 会被翻译为 require(’./image.png’)

而:<img src="./image.png">将会被编译到:h(‘img’, { attrs: { src: require(’./image.png’) }})

那在上面里我们也是写的相对路径呀,为什么没有被编译呢?     

这是因为在编译时图片的url还没有拼接好,{{}}表达式只会在渲染到页面上的时候执行,所以编译的时候src还是’./…/…/assets/img/’ + item + ‘.jpg’,这样的话webpack不认为这是一个模块,所以直接不处理,图片也就没有被编译。

解决办法

把图片作为资源引入,在图片的url加上require,变成require(url)。

实现代码

<template>
	<div v-for="item in images">
		<img :src="item" alt="">
	</div>
</template>
<script>
    export default {
        name: "",
        data: function () {
            return {
                changeDirection: true,
                images:[
					require('./../../assets/img/0.jpg'),
					......
					require('./../../assets/img/40.jpg'),
				]
            }
        }
    }
</script>

不会吧不会吧,这么多图片不会真有人一个个写吧?多图片应该这样写

<script>
    export default {
        name: "",
        data: function () {
            return {
                changeDirection: true,
                images:(function () {
                    // 导入图片模块
                    let fileArr = [];
                    for (let i = 0; i < 40; i++) {
                        fileArr[i] = require('./../../assets/img/' + i + '.jpg');
                    }
                    return fileArr;
                })(),
            }
        }
    }
</script>

修改后打包后的路径

在这里插入图片描述

修改后打包后的资源目录

在这里插入图片描述

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue项目中引入外部文件的方法(css、js、less)

    Vue项目中引入外部文件的方法(css、js、less)

    本篇文章主要介绍了Vue项目中引入外部文件的方法(css、js、less),非常具有实用价值,需要的朋友可以参考下
    2017-07-07
  • Vue.js实现文件上传压缩优化处理技巧

    Vue.js实现文件上传压缩优化处理技巧

    这篇文章主要介绍了Vue.js实现文件上传压缩优化处理,本文给大家介绍两种方法一种是借助canvas的封装的文件压缩上传,二是使用compressorjs第三方插件实现,本文给大家介绍的非常详细需要的朋友可以参考下
    2022-11-11
  • vue结合el-upload实现腾讯云视频上传功能

    vue结合el-upload实现腾讯云视频上传功能

    这篇文章主要介绍了vue结合el-upload实现腾讯云视频上传功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • Vue数组响应式操作及高阶函数使用代码详解

    Vue数组响应式操作及高阶函数使用代码详解

    这篇文章主要介绍了Vue数组响应式操作及高阶函数使用代码详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08
  • 教你在vue项目中使用svg图标的方法

    教你在vue项目中使用svg图标的方法

    本文给大家介绍了在vue项目中使用svg图标的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2022-04-04
  • Vue3 setup添加name的方法步骤

    Vue3 setup添加name的方法步骤

    如果你在 vue3 开发中使用了语法的话,对于组件的name属性,需要做一番额外的处理,下面这篇文章主要给大家介绍了关于Vue3 setup添加name的相关资料,需要的朋友可以参考下
    2022-11-11
  • vue 中固定导航栏的实例代码

    vue 中固定导航栏的实例代码

    今天小编就为大家分享一篇vue 中固定导航栏的实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue+Element实现页面生成快照截图

    Vue+Element实现页面生成快照截图

    这篇文章主要为大家详细介绍了Vue如何结合Element实现页面生成快照截图功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-03-03
  • vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作

    vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作

    这篇文章主要介绍了vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue下拉选择框Select组件使用详解(一)

    Vue下拉选择框Select组件使用详解(一)

    这篇文章主要为大家详细介绍了Vue下拉选择框Select组件的使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03

最新评论