nuxt 使用 :src="item.url"方式绑定图片为什么不行?

Question

使用 :src="item.url"
这种方式绑定图片为什么不行，只能写成静态

或者在data里面这样写

data () {

return {
    item: {
        url: require('~/assets/img/home.png')
    }
}

}

为什么使用直接 :src="item.url"会不行？

Answer 1

因为你直接写成静态的，会经过webpack进行编译，从而得到打包后正确的图片真实路径。
如果你写成动态的，webpack就不会进行编译，原封不动的把'~/assets/img/home.png'放到你图片的src里面，试问，http://xxx.xxx.xxx/~/assets/img/home.png存在这张图片吗？

Answer 2

图片放到static目录，改成这样

require('static/img/home.png')

Answer 3

你的url是'~/assets/img/home.png'，这个路径在你的服务器下是访问不了的。

你可以把这个图片放到cdn上，或者你服务器可以直接访问的路径下面，就可以了

Answer 4

您好。请问这个问题了吗？