vue中render函数中img的src直接加载路径无效

本文介绍在Vue项目中,如何有效解决img标签src属性直接加载图片路径无效的问题,提供两种解决方案:通过JS引入图片和使用base64字符串引用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

问题:vue中render函数中img的src直接加载路径无效

解决:

js代码:

第一种方案:通过js引入

<script>
//1、引进来
import img1 from "../../../assets/images/u52.png";
export default {
  name: "Orgstru",
  data() {
    return {
      columns7: [
        {
          title: "模板编号",
          key: "id",
          align: "center"
        }
        {
          title: "操作",
          key: "action",
          width: 200,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "div",
                {
                  style: {
                    width: "32%",
                    marginRight: "2%",
                    display: "inline-block",
                    color: "#1abc9c"
                  },
                  on: {
                    click: () => {
                      this.show(params.index);
                    }
                  }
                },
                [
                  h("img", {
                    attrs: {
                      //2、使用
                      src: img1
                    },
                    style: {
                      width: "17px",
                      verticalAlign: "middle"
                    }
                  }),
                  "查看"
                ]
              )
            ]);
          }
        }
      ]
    };
  },
  methods: {}
};
</script>

第二种方案:使用base64字符串引用

Vue 3 中,使用 `render` 函数渲染图片(`<img>` 标签)是一个常见的需求。Vue 的 `render` 函数允许你通过编程方式构建虚拟 DOM,而不是使用模板语法。 你可以使用 `h` 函数(即 `createElement`)来创建一个 `<img>` 节点,并将其作为组件的 `render` 函数返回值进行渲染。 --- ## ✅ 示例:使用 render 函数渲染图片 ### 基本示例: ```js import { h } from 'vue' export default { render() { return h('img', { src: 'https://example.com/image.jpg', alt: '示例图片', style: { width: '200px', border: '1px solid #ccc', borderRadius: '8px' } }) } } ``` 这个组件会在页面上渲染一张图片。 --- ## ✅ 使用响应式数据动态渲染图片 你可以结合 `ref`、`reactive` 或其他响应式 API 动态控制图片路径或样式。 ```js import { h, ref } from 'vue' export default { setup() { const imageUrl = ref('https://example.com/image.jpg') const width = ref(300) return () => { return h('img', { src: imageUrl.value, alt: '动态图片', style: { width: `${width.value}px`, transition: 'width 0.3s ease' }, onClick: () => { width.value += 50 } }) } } } ``` 点击图片会动态增加宽度。 --- ## ✅ 在组合式 API 中使用 render 渲染图片 你也可以使用 `setup()` 和 `render()` 混合的方式: ```js import { h, ref } from 'vue' export default { setup() { const src = ref('https://example.com/image.jpg') function changeImage(newSrc) { src.value = newSrc } return { src, changeImage } }, render() { return h('img', { src: this.src, alt: '可更换图片', style: { width: '200px' }, onClick: () => this.changeImage('https://example.com/another-image.jpg') }) } } ``` --- ## ✅ 使用 JSX 替代 render 函数(更直观) 如果你使用了 Babel 并启用了 JSX 支持,可以直接写 JSX: ```jsx import { defineComponent } from 'vue' export default defineComponent({ setup() { const src = 'https://example.com/image.jpg' return () => ( <img src={src} alt="JSX 图片" style={{ width: '200px' }} onClick={() => console.log('点击图片')} /> ) } }) ``` > 注意:需要配置 `@vitejs/plugin-vue-jsx` 或 Babel 插件支持 JSX。 --- ## ✅ 使用 props 传递图片地址 ```js import { h } from 'vue' export default { props: ['src'], render() { return h('img', { src: this.src, alt: '来自 prop 的图片', style: { width: '100%', maxWidth: '400px' } }) } } ``` 然后在父组件中使用: ```vue <template> <MyImage src="https://example.com/photo.jpg" /> </template> ``` ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值