vue-cli脚手架搭建项目静态资源图片渲染失败原因及解决方法

2022-07-23 09:29:39

前言

最近学习了vue-cli脚手架搭建项目,在静态资源图片渲染的时候出现了渲染失败的问题,通过搜索资料和咨询大佬,总结了以下原因:

1.vue-cli脚手架涉及到webpack的打包机制,最终页面并不会显示图片内容,原因在于图片路径并没有取打包后的资源路径。
2.在select选择中,require方法所返回的是字符串,而不是函数的执行结果。
接下来,请看详细例子。

一、简单的vue-cli静态资源图片渲染失败

示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。
在这里插入图片描述

二、动态的vue-cli静态资源图片渲染失败

以select选择框为例子(选择不同的图片就渲染不同的图片)

在这里插入图片描述
在这里插入图片描述

原因:require方法返回的是字符串,而不是函数执行的结果。

解决方法一:

在value前面加冒号

选择头像:<select v-model="person.imgsrc"><option:value=" require('../../assets/1.jpg')">1</option><option:value=" require('../../assets/2.jpg')">2</option><option:value=" require('../../assets/3.jpg')">3</option><option:value=" require('../../assets/4.jpg')">4</option></select><br>
      span><imgclass="img-style":src="person.imgsrc"></span>

解决方法二:

选择头像:<select v-model="person.imgsrc"><option v-for="option in options":key="option.key":value="option.imgsrc">{{option.key}}</option></select><br><span><imgclass="img-style"  v-bind:src="person.imgsrc"></span>
data(){return{
    person:{
              num:'',
              name:'',
              sex:'',
              age:'',
              hobby:''},
    options:[{
              key:'1',
              imgsrc:require('../../assets/1.jpg')},{
              key:'2',
              imgsrc:require('../../assets/2.jpg')},{
              key:'3',
              imgsrc:require('../../assets/3.jpg')},{
              key:'4',
              imgsrc:require('../../assets/4.jpg')}]}},

如果能帮的到你,欢迎大家关注点赞评论收藏转发~

如有不足也请在评论区提出批评指正!多多指教!

  • 作者:Danli.
  • 原文链接:https://blog.csdn.net/weixin_45680114/article/details/109561651
    更新时间:2022-07-23 09:29:39