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

---

前言

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

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

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

二、动态的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><img class="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><img class="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')
            }
    ]
    }
  },

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

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