Nuxt.js: when in nuxt use <img :src="url" /> error 404 not found pic

[wLove-c]

when in nuxt use error 404 not found pic

_{This question is available on Nuxt.js community (#c1864)}

[clarkdo]

 <img :src="static/..." />

[clarkdo]

@BruceHem Sorry for my too simple reply.

Inside template

 <img :src="static/..." />

Or inside data

<template>
  <div>
    <img :src="demo" />
  </div>
</template>

<script>
export default {
  data() {
    return { demo: '/dog.jpg' }
  }
}
</script>

Or

<template>
  <div>
    <img :src="demo" />
  </div>
</template>

<script>
import demo from 'static/demo.jpg'
export default {
  data() {
    return { demo }
  }
}
</script>

[wLove-c]

Get http://localhost:3000/static/img/uploadButton.jpg 404 (Not Found)

export default {
    data () {
      return {
        uploadPic: 'static/img/user/confirm/uploadButton.jpg'
      }
    }
}

it always allert error 404 not found

if use for example

 uploadPic:require( 'static/img/user/confirm/uploadButton.jpg')

is OK

[clarkdo]

Can you paste your codes or repo?

[pi0]

Please try using:

export default {
    data () {
      return {
        uploadPic: require('~static/img/user/confirm/uploadButton.jpg')
      }
    }
}

[wLove-c]

I see, if I use require , it is OK ,but Vue.js is Dissimilarity

[tennessine]

@wLove-c 动态绑定无法访问到assets的图片 有办法解决吗？把图片复制到static目录是不是有点儿太。。。

[wLove-c]

@tennessine 好像vue也不能动态绑定assets的图片 要绑定只能放在static里面，而且动态图片丢到assets里面会被webpack打包喔

[wLove-c]

@clarkdo Can you speak Chinese？ 请问一下，如果在nuxt里面 绑定static里面的图片，不用import或者require是不行的吗？我的实践结果是不行，但有没有是因为没有配置某些配置好的可能呢

[clarkdo]

是可以的, static目录已经作为静态资源目录暴露给node server了.

根据上面的截图, 您指定的是static/img/user/confirm/uploadButton.jpg, 你可以改为/img/user/confirm/uploadButton.jpg再次尝试一下.

可以看下当前issue, 我第二个回复里的Or inside data下面的方式, 就是加载的static下的图片资源.

[clarkdo]

@tennessine
static是静态资源目录, assets是需要由webpack打包处理的资源目录, 两者定位不同, 所以您在使用时可能需要一些权衡, 但是如果您确实有特殊的需求, 需要动态加载assets内的图片, 可以采用如下方式:

<template>
  <div class="container">
    <img :src="imgPath" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: 'nuxt-black'
    }
  },
  computed: {
    imgPath() {
      return require('~assets/' + this.url + '.jpg')
    }
  }
}
</script>

webpack在遇到'~assets/' + this.url + '.jpg形式时, 会将该目录下所有jpg文件进行打包, 也就失去了按需打包的意义, 所以不是十分建议.

[wLove-c]

@clarkdo 受教了，还是中文交流的感觉爽，表达的如此淋漓尽致

 export default {
    data () {
      return {
        uploadPic: '/img/user/confirm/uploadButton.jpg'
      }
    }
}

这个是可行的 ，import也是可行的 ，require也是可行的，最终还是喜欢上面这种，快捷 简单，而且动态引入sssets这个方法，暂时没有尝试，不过也觉得这种做法就算可行，但也是不合理的，因为最终会被打包，尽量精简代码才利于加载，还把图片打包进去总感觉就如.。。。。啥

[clarkdo]

@wLove-c
原谅我破破的英语 😅 , 能帮到你就好, 也谢谢你对Nuxt.js的支持 😸

[wLove-c]

@clarkdo 昨天还在被我上司说不会是两个中国人用蹩脚的英语在交流吧，然后看了下你资料 还真是中国人..瞬间 脑门子发黑...我这英语就不说了 是从小就没认真学，哈哈 感谢你的帮助，谢谢！感恩节快乐！

[wuyongzhi]

你两刷我的邮箱了：）

[wLove-c]

@clarkdo 您好！最近用nuxt遇到了一些很基础的小问题，请问一下有没有比较经典的基于nuxt的开源项目呢或者demo呢 可以借鉴一下 在文档里面之前好像有看到，现在回来找不到了....

[clarkdo]

https://github.com/nuxt-community/awesome-nuxt

[wLove-c]

@clarkdo 您好，根据官方文档，我已经拿到了想要的数据 data 但我在created（） 里面或者其他函数里面怎么拿到数据呢 后面还为此去了解了一下ssr 最终还是没有找到方法. 因为之前都是用的vue ，之前一直用core-js解决IE浏览器不能解析es6的问题 但在nuxt里面把core-js引入依旧不能解决IE浏览器的解析问题，请问一下您有比较好的方法吗？ 多次麻烦，，，，请见谅....

 export default {
    async asyncData () {
      let {data} = await api.hehe()
      console.log(data)  // something 
      return data
    }
data () {
  return {}
},
created () {
  console.log(this.data) // undefinde
}

[clarkdo]

this.$data, 或者直接取数据, 比如 'this.foo'.

Nuxt.js 通过babel转换es6代码, 底层也是core-js, 你需要用都什么特殊语法么? 可能需要添加插件.

Babel配置, 可以参考:
https://nuxtjs.org/api/configuration-build#babel

[wLove-c]

@clarkdo 谢谢，数据可以拿到了 但是 兼容ie的问题还不行 我只用es6就好了 ，暂时还不用特殊语法的
而且我看了这个 还用了这个方法 依旧没解决...

https://github.com/nuxt/nuxtjs.org/issues/39/

[mritgupta]

<template>
  <div class="container">
    <img :src="imgPath" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgPath:require('assets/images/image.jpg')
    }
  }
}
</script>

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.