vue项目中图片路径以变量形式传入,未正常显示?

说明: 下面所举的例子均在 vue-cli 创建的项目中

• 我们正常去显示图片的方式都是把图片的相对路径放在 img 标签的 src 属性中

<img src="../assets/delete-grey.svg" alt="delate">

像这样引入图片便可正常显示, 审查元素发现图片地址变成了 img/delete-grey.836b11f9.svg 这表明该图片已被正常解析

image.png

• 如果我们引入较少数量的图片, 采用上述方式完全没有问题; 当一个组件内部有图片引入, 并且该组件会被重复调用, 根据不同场景展示不同的图片, 此时组件内部图片的路径就只能以一个变量的形式来接收父组件传过来的值

子组件

// FooterButtons 组件
<img :src="item.url" alt="img">

父组件

// index.vue DOM结构
<FooterButtons
  :buttons="footerButtons"
/>
// footerButtons 变量
footerButtons: [
  {
     url: '../assets/next.svg',
  },
]

现在来看一下页面中的效果, 图片是没有办法正常显示的

image.png
审查元素发现, 图片路径是 ../assets/next.svg, 对比上述正常显示的图片路径我们不难发现它们之间的区别, next.svg 并没有被解析;

这是因为图片作为一种资源并没有被引入进来, 我们通过变量传递过去的仅仅是一个可以表示图片地址的字符串

image.png

• 解决办法
  通过 require 对图片路径进行引用, 这样传递过去的就是一种图片资源

// index.vue DOM结构
<FooterButtons
  :buttons="footerButtons"
/>
// footerButtons 变量
footerButtons: [
  {
     url: require('../assets/next.svg'),
  },
]

效果

image.png

以上!
有错望指出