g-images with dynamic paths not correctly generating full feature set
### Summary We have some components that we want to load images in. I've tried many variations on making this work, and in most cases, gridsome simply outputs the literal property path without actually transforming it. Using `require()` will correctly output the path, but then it doesn't output an actual `g-image` feature, just a generic unhashed `img` tag. I'm quite surprised at this as I can't imagine the tool would be very useful without dynamic images in components. There is an [existing bug for this](https://github.com/gridsome/gridsome/issues/137) with a proposed solution, however as you'll see below, the proposed solution is actually not working. ### Example code ```vue <template> <div> <!-- ... some other html ... --> <!-- FAIL: with computed, it outputs the literal imagePath, broken image --> <g-image :src="imagePath" /> <!-- FAIL: with direct prop, it outputs the literal prop, broken image --> <g-image :src="imageSrc" /> <!-- FAIL: kind of works, but just directly outputs the direct image tag without any g-image features --> <g-image :src="webpackImagePath" /> <!-- FAIL: works, but it's not dynamic! --> <g-image src="@/assets/images/literal-image-path.png" /> </div> </template> <script> export default { props: { imageSrc: { type: String, required: true } }, computed: { imagePath () { return `@/assets/images/${this.imageSrc}` }, webpackImagePath () { return require(`@/ass
Posted by bbugh on Mar 18, 2019, 2:38 PM
Tags
Related issues
- [BUG] Cowork (Windows): all Plan9 shares fail with "Plan9 mount failed: invalid argument" after Windows update KB5124008 (26200.9445) — uninstalling the KB fixe
- Feature Request: Auto-resume CLI session when usage limit resets
- Please deobfuscate the Python
- [Bug] MLX version of Gemma 4 26B fails to load: "Model type gemma4 not supported" (macOS)
- # 233 Developers Discussed Abandoning the Office Add-in Platform — An Open Letter on the Office.js Stability, Security & Trust Crisis
- [FEATURE] Allow users to configure which shell the Bash tool uses or inherit initial shell
Raise real-world problems, find people facing the same issue, and discuss solutions.4,000 issues0 comments
reliability (Software)
[BUG] Cowork (Windows): all Plan9 shares fail with "Plan9 mount failed: invalid argument" after Windows update KB5124008 (26200.9445) — uninstalling the KB fixe
Feature Request: Auto-resume CLI session when usage limit resets
Please deobfuscate the Python
[Bug] MLX version of Gemma 4 26B fails to load: "Model type gemma4 not supported" (macOS)
# 233 Developers Discussed Abandoning the Office Add-in Platform — An Open Letter on the Office.js Stability, Security & Trust Crisis
[FEATURE] Allow users to configure which shell the Bash tool uses or inherit initial shell
Admin Materials and Surfaces
AMD Support
g-images with dynamic paths not correctly generating full feature set
### Summary We have some components that we want to load images in. I've tried many variations on making this work, and in most cases, gridsome simply outputs the literal property path without actually transforming it. Using `require()` will correctly output the path, but then it doesn't output an actual `g-image` feature, just a generic unhashed `img` tag. I'm quite surprised at this as I can't imagine the tool would be very useful without dynamic images in components. There is an [existing bug for this](https://github.com/gridsome/gridsome/issues/137) with a proposed solution, however as you'll see below, the proposed solution is actually not working. ### Example code ```vue <template> <div> <!-- ... some other html ... --> <!-- FAIL: with computed, it outputs the literal imagePath, broken image --> <g-image :src="imagePath" /> <!-- FAIL: with direct prop, it outputs the literal prop, broken image --> <g-image :src="imageSrc" /> <!-- FAIL: kind of works, but just directly outputs the direct image tag without any g-image features --> <g-image :src="webpackImagePath" /> <!-- FAIL: works, but it's not dynamic! --> <g-image src="@/assets/images/literal-image-path.png" /> </div> </template> <script> export default { props: { imageSrc: { type: String, required: true } }, computed: { imagePath () { return `@/assets/images/${this.imageSrc}` }, webpackImagePath () { return require(`@/ass
Comments (0)
No comments yet. Start the discussion.