- <template>
- <div class="about">
- <h1>This is an about pageh1>
- <span v-bind:title="message">鼠标停留几秒span>
- >
- <img v-bind:src=img1 />
-
- <img v-bind:src=img2 />
-
- <img v-bind:src="img3"/>
-
- <img v-bind:src="img4"/>
- <img src="/images/logo.png"/>
- div>
- template>
-
- <script>
- // 直接导入
- import img3 from '../assets/logo.png'
- export default {
- data () {
- return {
- message: 'hello world!',
- img1: require('@/assets/logo.png'),
- img2: require('../assets/logo.png'),
- img3: img3,
- img4: '/images/logo.png'
- }
- }
- }
- script>
-
- <style scoped>
- style>
引用:
由于解析问题,通常直接引用链接,图片会加载失败,通过学习,整理出以下三种解决错误的方法
- <template>
- <div class="first">
-
- <img :src="imgarr[1]">
-
- <img :src="imgarr[0]">
-
- <img :src="imgurl">
-
- <img :src="imgarr[2]">
- div>
- template>
- <script>
- import img from "./2.jpeg"
- export default {
- // 定义数据
- data(){
- return {
- imgarr:[require("./1.jpeg"),"./2.jpeg","/3.jpeg"],
- imgurl:img,
- }
- },
- }
- script>
问题:在做Vue项目的时候,由于项目需求,需要动态绑定img的src时,突然发现如果说是直接请求后台接口的图片地址就能显示,
但是直接动态绑定img的src的图片的相对路径或者是绝对路径的时候,图片不能显示
当在给数据MyimgSrc 设置绝对路径或者是相对路径时应该使用require引入才能成功
currentSrc : require("@/assets/1.png")
直接导入
import url from "../../assets/logo.png" data { url, }
把图片放到static 文件夹里面 就能直接引入
总结:当动态绑定img的src的时候,vue数据绑定图片的相对路径或者是绝对路径的时候,需要require路径。
问题描述:想要用v-for来动态生成图片路径
上面样写是不行的,你会发现图片在页面中并没有正确显示。从上面的图片可以看出,打包后的图片路径明显不对。
这是因为webpack并没有对我们拼接的路径进行解析,图片也没有被引用到打包后的目录(如果有的话应该是40张)
vue-cli文档的HTML和静态资源处理里是这么描述的
静态资源可以通过两种方式进行处理:
在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。
放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝,而不会经过 webpack 的处理。
从相对路径导入
当你在 JavaScript、CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引用一个静态资源时,该资源将会被包含进入 webpack 的依赖图中。在其编译过程中,所有诸如 、background: url(…) 和 CSS @import 的资源 URL 都会被解析为一个模块依赖。
例如,url(./image.png) 会被翻译为 require(’./image.png’),
而:将会被编译到:h(‘img’, { attrs: { src: require(’./image.png’) }})
那在上面里我们也是写的相对路径呀,为什么没有被编译呢?
这是因为在编译时图片的url还没有拼接好,{{}}表达式只会在渲染到页面上的时候执行,所以编译的时候src还是’./…/…/assets/img/’ + item + ‘.jpg’,这样的话webpack不认为这是一个模块,所以直接不处理,图片也就没有被编译。
把图片作为资源引入,在图片的url加上require,变成require(url)。
不会吧不会吧,这么多图片不会真有人一个个写吧?多图片应该这样写