vue中img的src动态赋值（本地图片的路径）

问题&原因

1.问题：img的src属性直接绑定url变量，然而图片加载失败

<img :src=" '../../assets/images/'+item.url+'.jpg' " alt="picture"/>

2.原因：

在webpack中会将图片图片来当做模块来用
url-loader将直接将:src=" '../../assets/images/'+item.url+'.jpg' "解析成字符串，因为是动态加载的，所有无法解析图片地址
然后npm run dev 或者npm run build之后导致路径没有被加工【被webpack解析到的路径都会被解析为/static/img/[filename].png，完整地址为localhost:8080/static/img/[filename].png】

解决办法

1.将文件放在statics目录下（与src同级）

图片一类的静态文件，应该放在这个static文件夹下
这个文件夹下的文件（夹）会按照原本的结构放在网站根目录下
这时我们再去使用/static绝对路径，就可以访问这些静态文件了
注意：这样的话必须写成绝对路径如images:[{src:”/static/1.png”},{src:”/static/2.png”}]
但是，放到static里面webpack打包后只会把资源复制到发布目录而不会把小图片优化为base64。
为了兼顾可以把图片资源优化，所以还是不适合把图片资源放到static。

2.require方法

如果不想更改路径，可以用require将图片作为模块加载进去
用了require，就是将图片当成模块先引进来，再绑定。

<img :src="require('../../assets/images/classic.jpg')" alt="picture">

当需要实现动态加载图片的时候就需要传一个变量给require，但是require中不能直接赋值一个变量，可以用以下方法

<ul>
    <li v-for="item in channels" :key="item.name">
      <img :src="require('../../assets/images/'+item.url+'.jpg')" alt="picture">
      <h3>{{item.name}}</h3>
    </li>
  </ul>
//动态require，require(path)，path至少需要三部分组成
// ../../ 告诉webpack要从哪里找文件
// item.url 文件路径加名称
// .jpg文件后缀，必须加上，不然会报错
<script lang="ts">
  import Vue from 'vue';
  import {Component} from 'vue-property-decorator';
  type Picture = {
    name: string
    url: string
  }
  @Component
  export default class Images extends Vue {
    channels: Picture[] = [
      {name: '经典', url: 'classics'},
    ];
  }
</script>

还可以提前将require赋值给变量，再将变量赋值给src

<ul>
    <li v-for="item in channels" :key="item.name">
      <img :src=" item.url " alt="picture">
      <h3>{{item.name}}</h3>
    </li>
  </ul>
<script lang="ts">
  import Vue from 'vue';
  import {Component} from 'vue-property-decorator';
  type Picture = {
    name: string
    url: string
  }
  @Component
  export default class Images extends Vue {
    channels: Picture[] = [
      {name: '经典', url: '../../assets/images/classic.jpg'},
      //提前将require赋值给变量
    ];
  }
</script>

3.impport方法

import imgURL from '../../assets/images/classic.jpg';
<img src={imgURL } />

总结

如果做的是纯静态的网站展示，有许多的本地静态资源需要加载，里面包括本地数据和本地图片混合的好几组，建议使用static方式。其他情况下建议使用require方式

vue-cli的assets和static的两个文件的区别

assets：在项目编译的过程中会被webpack处理解析为模块依赖，只支持相对路径的形式，如< img src=”./logo.png”>和background:url(./logo.png),”./logo.png”是相对资源路径，将有webpack解析为模块依赖
static：在这个目录下文件不会被webpack处理,简单就是说存放第三方文件的地方，不会被webpack解析。他会直接被复制到最终的打包目录(默认是dist/static)下。必须使用绝对路径引用这些文件，这是通过config.js文件中的build.assetsPublic和build.assertsSubDirectory链接来确定的。任何放在static/中文件需要以绝对路径的形式引用：/static[filename]
根据webpack的特性，总的来说就是static放不会变动的，第三档的文件，asserts放可能会变动的文件

最后编辑于：2020.07.20 11:39:20