vue的引入图片的方式

web需要大量图片，图片来源大致分为这几个：

1. 静态的
2. 动态的

写法大致分为这几个：

1. 直接在img标签中书写
2. 在data等域中书写，然后动态改变 img

<template>
    <div class="hello">
        <img src="../assets/logo.png" alt="">
    </div>
    ...
</template>

// 项目中的图片路径为
// src/assets/logo.png

 img 标签是通过 webpack 的 file-loader 处理过的，换句话说 img 标签的路径会被 webpack 转换，从而得到正确的引用。

如果是动态的 就是在data 域中

1.  通过improt 引用 2.通过require 方式

<script>
    import img_index_path from '../../assets/img/index_1.png';
    import img_myself_path from '../../assets/img/myself_0.png';
 
    // 输出的路径是变化的：“/img/index_1.68c713f2.png”
    // 所以说导入图片路径不能用字符串变量方式来传递参数，必须import导入图片！
    console.log( img_index_path );
 
    export default {
        name: 'footer',
        data () {
            return {
                img_index_path: img_index_path,
                img_myself_path: require（“../../assets/img/myself_0.png”），

                //如果直接 在通过一下方式 图片是不显示的
                img_myself_path: “../../assets/img/myself_0.png” 
                    
            };
        }
 
    };
</script>

style 中引入图片

background: url(../../assets/images/entry-icon.png) 0 0 no-repeat; 

总结：

asserts 文件夹下的资源会被 webpack 处理（添加哈希值等等），导致直接引用无法找到文件。

public 文件夹下的资源不会被处理，可以直接通过路径引用。

结合之前的需求(动态与静态资源)，我总结了下面想法：

1. public 文件夹下存放前端需要的资源文件（如logo，动画需要图片等等）。为了正确使用，应该将该文件交给后端放入正确位置，从而得到正确引用。
2. 一种很常见的需求是后端发送json包，包内包含图片路径，这时其实完全是后端问题，后端应该保证给的图片路径能被正确引用，与 public, asserts 文件夹无关。
3. public, asserts 只是前端开发时使用的资源文件夹。一种需求是前端需要使用类似 mock.js等库进行后端数据模拟，为了得到正确的图片数据，应该将图片资源放入public中，并使用正确路径，在最后交付时删除测试文件。