问题背景

在Nuxt.js项目中，有时候需要为image绑定指定src。

举个例子

image_src = "~/assets/img/image.png"

以下两种做法都会报错:

• 错误做法1

   <img
     :src="image_src"
     width="70px"
     height="80px"
   />

错误：
图片无法展示，路径错误。

• 错误做法2

   <img
     :src="require(`${image_src}`)"
     width="70px"
     height="80px"
   />

错误：

 ERROR  [Vue warn]: Error in render: "Error: Cannot find module '~/assets/img/image.png'"

解决方法

对比官方文档中的示例:

https://nuxtjs.org/docs/directory-structure/assets/

参考官方示例

<img :src="require(`~/assets/img/${image}.jpg`)" />

修改成

image_src="image.png"

   <img
     :src="require(`~/assets/${image_src}`)"
     width="70px"
     height="80px"
   />

问题就解决了。

原理解释

看起来这是因为nuxt.js中，路径~是个特殊路径，需要在编译阶段进行解析，无法在客户端进行。