如何从src文件夹导入图片？解决b-img组件加载图片破损问题

问题核心在于Vue项目的资源解析逻辑：直接给b-img的src写相对路径时，webpack不会将其识别为资源模块处理，编译后实际路径出错，导致图片加载失败。而b-card的:img-src用了require()，相当于触发webpack对图片资源的解析打包流程，所以能正常显示。

以下是不用卡片组件的解决办法：

• 方案1：给b-img的src绑定require路径
  直接沿用b-card的资源引入方式，给b-img的src加上v-bind语法（冒号），用require()包裹图片路径：

  <b-col class="details" md="8">
    <b-img :src="require('../assets/southBank.png')"></b-img>
  </b-col>
  

• 方案2：将图片移至public目录用绝对路径访问
  把southBank.png放到项目根目录的public/assets文件夹（没有则新建），然后用绝对路径引用：

  <b-col class="details" md="8">
    <b-img src="/assets/southBank.png"></b-img>
  </b-col>
  

  这种方式下图片会作为静态资源直接被访问，无需webpack解析。

• 方案3：在组件data中定义图片路径再引用
  如果需要复用图片路径，可以先在组件的data中引入资源，再绑定到b-img上：

  <template>
    <b-col class="details" md="8">
      <b-img :src="imgUrl"></b-img>
    </b-col>
  </template>
  
  <script>
  export default {
    data() {
      return {
        imgUrl: require('../assets/southBank.png')
      }
    }
  }
  </script>
  

内容的提问来源于stack exchange，提问作者Jerry